Auto imports for vue files ?

[ManUtopiK]

Hi!

Thanks for this awesome web extension starterkit. It's astonishing !

I've started a new project from scratch with Vue framework.
When I add a new Button.vue component in /components directory, it is not auto imported as it should be. I've got a Vue warning.

I tried many things without success :

import { defineConfig } from 'wxt'

// See https://wxt.dev/api/config.html
export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-vue'],
  imports: {
    eslintrc: {
      enabled: 9,
    },
    presets: [
      'vue'
    ],
    dirsScanOptions: {
      filePatterns: [
        '**/*.vue',
        '**/*.ts',
        '**/*.tsx',
      ],
    },
    dirs: [
      './components/**/*',
    ],
    addons: {
      vueTemplate: true // Should be here : https://github.com/wxt-dev/wxt/blob/main/packages/module-vue/src/index.ts#L27
    }
  },
})

Any ideas about this issue ?

[aklinker1]

unimport doesn't support vue components. To add auto-imports for them, you need to add unplugin-vue-components. We should add this to @wxt-dev/module-vue though, unimport handles auto-imports for react/solid's .tsx files. See #772.

The one thing holding #772 back is generating types without needing to run vite (dev mode or build). Ideally, similar to the rest of the auto-imports, we need to be able to generate types inside the wxt prepare command. That way types are ready as soon as you run npm i and you don't have to wait for a full build.

[ManUtopiK]

I added this config and it works!

import { defineConfig } from 'wxt'
import { resolve } from 'path'

import Components from 'unplugin-vue-components/vite'

// See https://wxt.dev/api/config.html
export default defineConfig({
  srcDir: 'src',
  extensionApi: 'chrome',
  modules: [
    '@wxt-dev/unocss',
    '@wxt-dev/auto-icons',
    '@wxt-dev/module-vue'
  ],
  manifest: {
    permissions: ['storage', 'scripting', 'activeTab'],
  },

  autoIcons: {
    enabled: true,
    baseIconPath: 'assets/icon-512.png',
    grayscaleOnDevelopment: true,
    sizes: [512, 128, 96, 48, 32, 16],
  },

  vite: () => ({
    plugins: [
      Components({
        dirs: [r('src/components')],
        dts: r('.wxt/components.d.ts'),
      }),
    ],
  }),

  imports: {
    eslintrc: {
      enabled: 9,
    },
  },
  runner: {
    chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
  }
})

const r = (...args: string[]) => resolve(__dirname, ...args)

All my extension is in a src directory.
I'm not sure putting components.d.ts in .wxt directory is safe, but for now I haven't encountered any issue...

[aiktb]

You can also add the generated type file to wxt.dt.ts through WXT hooks, so you don't need to manually add it to types
https://wxt.dev/api/reference/wxt/interfaces/WxtHooks.html#prepare-types