How to integrate with vite ?

[patrickelectric]

I'm trying to do the integration with:

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
      },
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
    }),
    Components({
      // generate `components.d.ts` global declarations
      // https://github.com/antfu/unplugin-vue-components#typescript
      dts: true,
      // auto import for directives
      directives: false,
      // resolvers for custom components
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
      // https://github.com/antfu/unplugin-vue-components#types-for-global-registered-components
      types: [
        {
          from: 'vue-router',
          names: ['RouterLink', 'RouterView'],
        },
        {
          from: 'vue-tour',
          names: ['VTour'],
        },
      ],
      // Vue version of project.
      version: 2.7,
    }),
  ],

But with no luck

[patrickelectric]

I also imported it manually on the webpage that's necessary.

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueTour>
       <VApp>
         <App> at /Users/patrick/git/blue/blueos/core/frontend/src/App.vue
           <Root>

[solbreslin]

I fixed this by adding VTour to a VuetifyResolver ignore list. Here's the relevant part of the vite config:

import Components from "unplugin-vue-components/vite";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";

const CustomVuetifyResolver = {
  type: "component",
  resolve: name => {
    const ignored = ["VStripe", "VTour", "VStep"];
    if (ignored.some(prefix => name.startsWith(prefix))) return;

    return VuetifyResolver().resolve(name);
  }
};
export default defineConfig(({ command, mode }) => {
  const config = {
    plugins: [
      vue(),
      Components({
        resolvers: [CustomVuetifyResolver]
      })
    ],

  return config;
});