pinia VS composition-api

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

Composition API (now built-in): Composition API is a built-in feature of Vue 3 and is currently available to Vue 2 through the officially maintained @vue/composition-api plugin. In Vue 3, it's mainly used together with the syntax in single-report additives. Here is a basic instance of a issue using Composition API:

√ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... quasar-qrcode-scanner √ Pick Quasar version: » Quasar v1 (Vue 2) √ Pick script type: » Typescript √ Package name: ... quasar-qrcode-scanner √ Project product name: (must start with letter if building mobile apps) ... Quasar QR Code Scanner √ Project description: ... A Quasar Project √ Author: ... √ Pick a Vue component style: » Composition API (recommended) (https://github.com/vuejs/composition-api) √ Pick your CSS preprocessor: » Sass with SCSS syntax √ Pick a Quasar components & directives import strategy: (can be changed later) » * Auto-import in-use Quasar components & directives - also treeshakes Quasar; minimum bundle size √ Check the features needed for your project: » ESLint √ Pick an ESLint preset: » Prettier

I'd just found out about this back port of the Composition API to Vue 2 (https://github.com/vuejs/composition-api). What's your experience with that? Is it stable enough to use in a production project with +1000 users? Or is more experimental?

While Vue 3 has had a paradigma change by switching to the Composition API as the primary API, you still can use the "old" Options API which stays mostly unchanged to Vue 2. And vice-versa Vue 2 actually supports most of the Composition API when you include an additional plugin: https://github.com/vuejs/composition-api

Is it even worth it to use https://github.com/vuejs/composition-api or should i migrate to vue 3. I'm only using vue 2 so i can use the vuetify calendar component.

Npm package: @vue/composition-api

If you can’t migrate to Vue 3 today, then you can still use the Composition API already. You can do this by installing the official Composition API Vue 2 Plugin.

I see that the @vue/composition-api also admits to having some performance overhead when used with Vue 2. And it appears to have quite a list of its own gotchas, judging from the README.

For what it's worth most of Vue 3's features can be backported to Vue 2 apps by including the @vue/composition-api package. I agree with the other comment, the v2 docs will get you very far.