Nuxt 3 is hybrid framework that work on the top of Vue3 , which used to reactive single page web apps. Nuxt 3 has many performance upgrade as well as structural changes. One of them is Plugins.

Vuex 4

Vuex is the official store (for sharing data among component without using props) for Vuejs apps. Vuex 4 is the store for Vue3 applications and Nuxt3.

Nuxt3

To getStarted with Vuex4 in Nuxt3 , we need a vue plugin, since there no official @nuxt module for the latest store. Pinia does have a module for Nuxt, and it work well.

Plugin

Create vuex.ts in plugins directory with following content. 

 import { defineNuxtPlugin } from '#app'   import {store} from  '@/store/store' authors  export default defineNuxtPlugin((nuxtApp) => {   nuxtApp.vueApp.use(store) })

Store

We can create a regular vuex store as follows

 import { createStore } from 'vuex'  export const store = createStore({     state() {         return { count: 0}     } })

Nothing special about the store. Let's access it through the component.

 <template>   <div>    {{store}}   <NuxtWelcome/>        </div> </template>  <script >    export default({      data(){       return {           store: this.$store.state.count       }     }   }) </script>
This free site is ad-supported. Learn more
​