pinia VS unplugin-auto-import

Pinia tab is a feature integrated with Pinia, allowing you to view the registered modules and their details.

pinia

If you like Vuex, you'll love Pinia (the new official Vue state management library). At least, I enjoyed recently migrating my personal app from Vuex to Pinia. Pinia is even simpler / more straightforward than Vuex (and even more so compared to Redux).

Related

const authMiddleware: Middleware = ({ pinia }) => { // !!! Important !!! // tell all the stores you are contacting // Pinia instance, otherwise you will have problems because Pinia will access the global object // https://github.com/vuejs/pinia/blob/8626aac0049243de231401a01fe20092eeaf279c/packages/pinia/src/store.ts#L870 if (!authStore(pinia).isAuth) { return { path:'/login', status: 401, } } }

When installing the "pinia" package via npm i pinia, I got a bunch of errors, similar to what's described here. This seems to be an issue with npm. Solution to that : install using yarn add -D pinia

Does using the main branch of pinia fix your issue? Over aggressive unwrapping was changed in https://github.com/vuejs/pinia/pull/1444

Also, I tried one syntax based on : https://github.com/vuejs/pinia/discussions/1096

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