DEV Community

abbazs
abbazs

Posted on

3

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay