injection "Symbol(vuetify:form)" not found

[Kaschi14]

Hey there, thanks so much for this awesome project. I first started implementing something like this myself, but it quickly got out of hand :'D

I'm getting this error and have no idea why:

injection "Symbol(vuetify:form)" not found. Proxy(Object) {…} at <Vjsf>
at <Settings>
at <RouterView>
at <VApp>
at <App>

It's not related to my schema / data / options as I tried it with minimal examples as well. This is how my Vite script looks as it didn't work the same way proposed in the docs.

// Plugins
import { fileURLToPath, URL } from 'node:url';
import vue from '@vitejs/plugin-vue';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

// Utilities
import { defineConfig } from 'vite';

export default defineConfig(async () => {
  const { commonjsDeps, commonjsDepsPaths } = await import('@koumoul/vjsf/utils/build.js');

  return {
    optimizeDeps: {
      include: commonjsDeps,
    },
    build: {
      commonjsOptions: {
        include: commonjsDepsPaths,
      },
    },
    plugins: [
      vue({
        template: {
          transformAssetUrls,
          compilerOptions: {
            isCustomElement: (tagName) => (
              tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
            ),
          },
        },
      }),
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
      vuetify({
        autoImport: true,
        styles: 'sass',
      }),
    ],

here is my Vue View:

<template>
  <vjsf v-model="data" :schema="schema" />
</template>

<script>
import Vjsf from '@koumoul/vjsf';

export default {
  components: {
    Vjsf,
  },

  setup() {},

  data() {
    return {
      // data: {},
      data: {
        username: 'johnDoe',
        age: 30,
      },
      // schema: settingsSchema,
      schema: {
        title: 'Simple Test Schema',
        description: 'Example schema for testing VJSF',
        type: 'object',
        properties: {
          username: {
            type: 'string',
            title: 'Username',
          },
          age: {
            type: 'integer',
            title: 'Age',
          },
        },
        required: ['username', 'age'],
      },
      options: {},
    };
  }
};
</script>

I know this is not ideal for reproduction but maybe you have an idea. Lmk if I should provide anything else.

[albanm]

This is a bug. Vjsf is made to integrate with vuetify's v-form component. This integration should be optional, right now it is not. I will publish a fix soon and document the optional integration with v-form. In the mean time you simply need to wrap your vjsf tag into a v-form.

[albanm]

I've added v-form in the getting-started and remove the injection warning.