vitesse VS unplugin-auto-import

The docs help but also look at vitesse template - that helped me a lot to figure out usage and the author of the template is one of the contributors of unplugin.

I highly recommend to try Vitesse at least just to see state-of-the-art Vue/Vite features available out there

Although, I think admin templates are overrated, a setup template is a lot more useful, check out: https://github.com/antfu/vitesse

Nice template bringing it all together: https://github.com/antfu/vitesse

Vitesse

Im using vitesse boilerplate (https://github.com/antfu/vitesse) which has in my opinion standard project structure:

antfu/vitesse is a great starter for vue similar to nuxt 3 (spa mode). It does auto import, file based routing, etc.. demo here

Unplugin auto import

You looked through https://github.com/antfu/unplugin-auto-import/issues/61, https://github.com/unjs/unimport/pull/218 and https://github.com/antfu/unplugin-auto-import/issues/61?

unplugin-auto-import, let's you set what any library to be automatically imported. It has reasonable defaults for popular libraries.

AutoImport({ // targets to transform include: [ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx /\.vue$/, /\.vue\?vue/, // .vue /\.md$/, // .md ], // global imports to register imports: [ // presets 'vue', 'vue-router', // custom { '@vueuse/core': [ // named imports 'useMouse', // import { useMouse } from '@vueuse/core', // alias ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core', ], 'axios': [ // default imports ['default', 'axios'], // import { default as axios } from 'axios', ], '[package-name]': [ '[import-names]', // alias ['[from]', '[alias]'], ], }, ], // Enable auto import by filename for default module exports under directories defaultExportByFilename: false, // Auto import for module exports under directories // by default it only scan one level of modules under the directory dirs: [ // './hooks', // './composables' // only root modules // './composables/**', // all nested modules // ... ], // Filepath to generate corresponding .d.ts file. // Defaults to './auto-imports.d.ts' when `typescript` is installed locally. // Set `false` to disable. dts: './auto-imports.d.ts', // Auto import inside Vue template // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72 vueTemplate: false, // Custom resolvers, compatible with `unplugin-vue-components` // see https://github.com/antfu/unplugin-auto-import/pull/23/ resolvers: [ /* ... */ ], // Generate corresponding .eslintrc-auto-import.json file. // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals eslintrc: { enabled: false, // Default `false` filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') }, })

If you don’t want to write the import everywhere, use a unplug auto importing plug-in: https://github.com/antfu/unplugin-auto-import

I forgot to specify, for the AutoImport I'm using unplugin-auto-import/vite

Others have already mentioned answers but I just want to say if you are bothered by importing reactive and computed take a look at https://github.com/antfu/unplugin-auto-import.

You can check out https://github.com/antfu/unplugin-auto-import