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

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 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; }, }, }); 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); }); Then, make sure to register this plugin in your nuxt.config.js: export default { plugins: ['~/plugins/pinia.js'], }; 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. 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); }); 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. You are in mobile mode. You are in desktop mode. import { computed } from 'vue'; import { useResponsiveStore } from '~/stores/useResponsiveStore'; const responsiveStore = useResponsiveStore(); const mobileMode = computed(() => responsiveStore.mobileMode); 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.

npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm install pinia

import { defineStore } from 'pinia';

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

import { createPinia } from 'pinia';

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

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

Related Posts

Written in the Stars: Unraveling Cosmic Love, Destiny, ...

Feb 19, 2025  0

Data-Driven Design: How User Insights Transformed My Cr...

Feb 6, 2025  0

Sprint 3: Results

Feb 20, 2025  0