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.

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.
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.
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.