DEV Community


Posted on

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.


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)


  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

    export default defineNuxtConfig({
      modules: [
      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() {
      persist: {
        storage: persistedState.localStorage,
    // Example using Composition API
    import { defineStore } from "pinia";
    export const useCounterStore = defineStore(
      () => {
        const count = ref(0);
        const increment = () => {
        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:

      <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.
          class="self-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          Click Me!
    <script setup lang="ts">
    import { useCounterStore } from "~/stores";
    const counterStore = useCounterStore();
    const counter = () => {

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

Top comments (0)