A Nuxt Pinia persisted storage click counter app

How to Create a Nuxt Pinia Persisted Storage Click Counter App?

In this tutorial, we will go through the process of creating a Nuxt Pinia persisted storage click counter. This counter will retain the count value even after the browser is closed and reopened.

Prerequisites

Before we get started, please ensure that you have the following installed:

• Node.js
• Nuxt.js
• Visual Studio Code (or any other code editor of your choice)

Steps

1. Install Nuxt
   

   npx nuxi init
   

2. Open the project in VSCode
   

   code your_project_name
   

3. Install the dependencies
   

   npm install
   

4. Add Pinia and persisted store dependencies
   

   npm install pinia pinia-plugin-persistedstate @pinia/nuxt @pinia-plugin-persistedstate/nuxt @nuxtjs/tailwindcss
   

5. Remove the App.vue file in the project root folder
   

   rm App.vue
   

6. Edit the nuxt.config.ts file in the project root folder and add the dependency modules
   

   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
     modules: [
       "@pinia/nuxt",
       "@pinia-plugin-persistedstate/nuxt",
       "@nuxtjs/tailwindcss",
     ],
     ssr: true,
   });
   

7. Create a folder named stores and a file called index.ts in the stores folder
   

   mkdir stores
   touch stores/index.ts
   

8. Create the store in the file ~/stores/index.ts (Both options and composition API examples given)
   

   // Example using Options API
   import { defineStore } from "pinia";
   import { ref } from "vue";
   
   export const useCounterStore = defineStore("counter", {
     const count = ref('')
     actions: {
       increment() {
         this.count++;
       },
     },
     persist: {
       storage: persistedState.localStorage,
     },
   });
   
   // Example using Composition API
   import { defineStore } from "pinia";
   
   export const useCounterStore = defineStore(
     "counter",
     () => {
       const count = ref(0);
       const increment = () => {
         count.value++;
       };
       return { count, increment };
     },
     {
       persist: {
         storage: persistedState.localStorage,
       },
     }
   );
   

9. Note the persist block of the code, we are using localStorage which works only with client-side.
   

   persist: {
     storage: persistedState.localStorage,
   }
   

10. Create the ~/pages/index.vue file
    

    mkdir pages
    touch pages/index.vue
    

11. Edit the ~/pages/index.vue file as follows:
    

    <template>
      <div class="flex flex-col justify-center mt-20">
        <h1 class="bg-gray-800 text-white text-center">Click Counter</h1>
        <p class="text-center">
          You have clicked the button {{ counterStore.count }} times.
        </p>
        <button
          @click="counter"
          class="self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Click Me!
        </button>
      </div>
    </template>
    
    <script setup lang="ts">
    import { useCounterStore } from "~/stores";
    
    const counterStore = useCounterStore();
    const counter = () => {
      counterStore.increment();
    };
    </script>
    

In the above code, we create a simple template for our application. It contains a header, a paragraph that displays the current count, and a button that increments the count when clicked.

We import the useCounterStore from the stores directory and create an instance of it as counterStore. We also define a function counter that logs a message to the console and calls the increment method of the counterStore when the button is clicked.

Now that we have completed all the necessary steps, we can run our application using the following command: npm run dev