unplugin-auto-import VS vite-plugin-vue-layouts

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

I recently came across this and find it super easy to use: https://github.com/JohnCampionJr/vite-plugin-vue-layouts

So when using Vue we don't particularly have a layout system either unless you're using something like Nuxt or Vite Plugin Vue Layouts both of which abstract the problem away with some magic. Unfortunately, Nuxt doesn't have fantastic JSX/TSX support with Nuxt3 as of yet and the Vite Plugin is currently only designed to handle Single File Components (SFCs), so for a JSX/TSX user such as myself this is untenable.

- Vite-plugin-vue-layouts - layouts for pages

Vite plugin vue layouts