どこに保存する？フロントエンドのデータ管理をNuxtで理解する

export const useAuth = () => {
  // maxAge: 7日間のCookieを設定（秒単位）
  const token = useCookie('auth_token', {
    maxAge: 60 * 60 * 24 * 7,
    secure: true,
    sameSite: 'lax',
  })

  const login = (newToken: string) => {
    token.value = newToken
  }

  const logout = () => {
    token.value = null
  }

  return { token, login, logout }
}

<script setup lang="ts">
const { token, logout } = useAuth()
</script>

<template>
  <div>
    <p v-if="token">ログイン中</p>
    <button @click="logout">ログアウト</button>
  </div>
</template>

export const useTheme = () => {
  const theme = ref<'light' | 'dark'>('light')

  // クライアントサイドでのみLocalStorageから初期値を読み込む
  if (import.meta.client) {
    const saved = localStorage.getItem('app_theme')
    if (saved === 'light' || saved === 'dark') {
      theme.value = saved
    }
  }

  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
    if (import.meta.client) {
      localStorage.setItem('app_theme', theme.value)
    }
  }

  const clearTheme = () => {
    theme.value = 'light'
    if (import.meta.client) {
      localStorage.removeItem('app_theme')
    }
  }

  return { theme, toggleTheme, clearTheme }
}

<script setup lang="ts">
const { theme, toggleTheme } = useTheme()
</script>

<template>
  <div>
    <p>現在のテーマ：{{ theme }}</p>
    <button @click="toggleTheme">テーマを切り替える</button>
  </div>
</template>

// 保存
localStorage.setItem('user', JSON.stringify({ name: '山田', age: 30 }))

// 取得
const raw = localStorage.getItem('user')
const user = raw ? JSON.parse(raw) : null

type WizardForm = {
  name: string
  email: string
  plan: string
}

export const useWizard = () => {
  const step = ref(1)
  const formData = ref<WizardForm>({ name: '', email: '', plan: '' })

  // クライアントサイドでのみSessionStorageから初期値を読み込む
  if (import.meta.client) {
    const savedStep = sessionStorage.getItem('wizard_step')
    if (savedStep) step.value = Number(savedStep)

    const savedForm = sessionStorage.getItem('wizard_form')
    if (savedForm) formData.value = JSON.parse(savedForm)
  }

  const nextStep = () => {
    step.value++
    if (import.meta.client) {
      sessionStorage.setItem('wizard_step', String(step.value))
    }
  }

  const prevStep = () => {
    step.value--
    if (import.meta.client) {
      sessionStorage.setItem('wizard_step', String(step.value))
    }
  }

  const updateForm = (data: Partial<WizardForm>) => {
    formData.value = { ...formData.value, ...data }
    if (import.meta.client) {
      sessionStorage.setItem('wizard_form', JSON.stringify(formData.value))
    }
  }

  const clearWizard = () => {
    step.value = 1
    formData.value = { name: '', email: '', plan: '' }
    if (import.meta.client) {
      sessionStorage.removeItem('wizard_step')
      sessionStorage.removeItem('wizard_form')
    }
  }

  return { step, formData, nextStep, prevStep, updateForm, clearWizard }
}

npm install @pinia/nuxt

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const user = ref<{ name: string; email: string } | null>(null)
  const isLoggedIn = computed(() => !!user.value)

  const setUser = (data: { name: string; email: string }) => {
    user.value = data
  }

  const clearUser = () => {
    user.value = null
  }

  return { user, isLoggedIn, setUser, clearUser }
})

<script setup lang="ts">
const userStore = useUserStore()
</script>

<template>
  <p>{{ userStore.user?.name }}</p>
</template>

npm install idb-keyval

import { get, set, del } from 'idb-keyval'

export const useOfflineData = () => {
  const saveData = async (key: string, value: unknown) => {
    if (import.meta.client) {
      await set(key, value)
    }
  }

  const getData = async <T>(key: string): Promise<T | undefined> => {
    if (import.meta.client) {
      return await get<T>(key)
    }
  }

  const deleteData = async (key: string) => {
    if (import.meta.client) {
      await del(key)
    }
  }

  return { saveData, getData, deleteData }
}

npm install @vite-pwa/nuxt -D

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    manifest: {
      name: 'My Nuxt App',
      short_name: 'NuxtApp',
      theme_color: '#ffffff',
    },
    workbox: {
      // 静的アセットをキャッシュ
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
      runtimeCaching: [
        {
          // APIレスポンスをキャッシュ（Stale While Revalidate）
          urlPattern: /\/api\//,
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'api-cache',
            expiration: {
              maxEntries: 100,
              maxAgeSeconds: 60 * 60 * 24, // 1日
            },
          },
        },
      ],
    },
  },
})