Unable to use with Vuetify

[dbellinghoven]

Describe the bug

Hello, I currently have a Vuetify app that I wish to use with the vue-sf3-loader. However, I can't seem to figure out how to make it work with Vuetify. Specifically, if the content retrieved by loadModule contains any Vuetify elements (e.g. v-btn, v-card, etc.) I get the following error:

Unknown custom element: <v-text-field> - did you register the component correctly? For recursive components, make sure to provide the "name" option

This is a basic snippet of what is happening (see here for the exact code):

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
      <MyComponent/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import Vue from 'vue';
import { loadModule } from 'vue3-sfc-loader/dist/vue2-sfc-loader';

const sfcContent = '<template><v-text-field></v-text-field></template>';

const options = {
  moduleCache: {
    vue: Vue
  },
  getFile: async (url) => {
    if ( url === '/myComponent.vue' )
      return Promise.resolve(sfcContent);
  },
  addStyle: () => {},
}

export default {
  name: 'App',

  components: {
    HelloWorld,
    MyComponent: () => loadModule('/myComponent.vue', options)
  },

  data: () => ({
    //
  }),
};
</script>

I was hoping someone could help me figure out how to make it so that Vuetify elements are recognized by loadModule.

To Reproduce

1. git clone git@github.com:dbellinghoven/referral.git
2. cd referral/ui
3. yarn serve
4. Go to localhost:8080 in your browser
5. Open up the console
6. The aforementioned error should appear

Expected behavior

Versions

• Browser (name & version): Google Chrome Version 91.0.4472.106 (Official Build) (x86_64)
• vue3-sfc-loader: 0.7.3
• Vue 2: 2.6.11
• Vuetify: 2.4.0

Additional context

[tve]

I'm having the same issue, what was your solution?

[FranckFreiburger]

@dbellinghoven, any details about how you fixed your issue ?

[symbioquine]

vue3-sfc-loader works fine with Vuetify, but you have to recognize that most folks use Vuetify with built-time plugins that perform the component import/registration automatically. If you want that sort of behavior you'd need to implement it in your application something like what I've done here: https://github.com/symbioquine/farmOS_asset_link/blob/caf3eb80a6593a9332f51b07ea4a7ca1031f36d6/alinkjs/src/AssetLinkPluginLoaderCore.js#L62-L127