A Nuxt Pinia persisted storage click counter app
Tags: nuxt, pinia, vue
Published: 2023-04-12 13:29:48

---
title: A Nuxt Pinia persisted storage click counter app
published: true
description: A Nuxt, Vue, Pinia persisted storage click counter aplication
tags: nuxt, pinia, vue
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-12 13:28 +0000
---

# 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

    ```typescript
    // 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)

    ```typescript
    // 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:

    ```vue
    <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`