How to Dynamically Recognize Mobile Mode Using Pinia in Nuxt.js

Posted on by


In this blog, we’ll walk through how to manage the mobile mode state in a Nuxt 3 application using Pinia, Vue’s state management library.
1- Install Nuxt.js and Pinia
First, if you haven’t already, create a new Nuxt 3 project and install the necessary dependencies.

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm install pinia
Enter fullscreen mode

Exit fullscreen mode

2- Create a Store to Manage the Mobile Mode State
Next, define a store using Pinia to manage the state of the mobile mode. This store will track whether the app is in mobile mode (based on the window size).

import { defineStore } from 'pinia';

export const useResponsiveStore = defineStore('responsive', {
  state: () => ({
    mobileMode: false,
  }),
  actions: {
    setMobileMode(value) {
      this.mobileMode = value;
    },
  },
});
Enter fullscreen mode

Exit fullscreen mode

3- Set Up Pinia in Nuxt
You need to create a plugin to integrate Pinia into your Nuxt 3 app. This plugin will ensure that the store is available globally.

Create a new file under plugins/pinia.js:

import { createPinia } from 'pinia';

export default defineNuxtPlugin((nuxtApp) => {
  const pinia = createPinia();
  nuxtApp.vueApp.use(pinia);
});
Enter fullscreen mode

Exit fullscreen mode

Then, make sure to register this plugin in your nuxt.config.js:

export default {
  plugins: ['~/plugins/pinia.js'],
};
Enter fullscreen mode

Exit fullscreen mode

4- Update Mobile Mode Based on Window Size
To handle window resizing, use a global layout or component that listens for window size changes and updates the mobile mode state accordingly.

<template>
  <div>
    <Navbar />
    <main>
      <slot />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useResponsiveStore } from '~/stores/useResponsiveStore';

const responsiveStore = useResponsiveStore();

const handleResize = () => {
  responsiveStore.setMobileMode(window.innerWidth < 768);
};

onMounted(() => {
  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
Enter fullscreen mode

Exit fullscreen mode

5- Use the Mobile Mode State in a Component
Now, let’s create a simple component that conditionally renders content based on the mobile mode state.

<template>
  <div>
    <p v-if="mobileMode">You are in mobile mode.</p>
    <p v-else>You are in desktop mode.</p>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useResponsiveStore } from '~/stores/useResponsiveStore';

const responsiveStore = useResponsiveStore();
const mobileMode = computed(() => responsiveStore.mobileMode);
</script>
Enter fullscreen mode

Exit fullscreen mode

With this setup, your Nuxt 3 app will dynamically adjust based on the user’s screen size, and you can easily manage the mobile mode state using Pinia.



Source link