Почему в Nuxt 3 не отображается файл manifest?

Как настроить PWA с использованием библиотеки @vite-pwa/nuxt в Nuxt 3 чтобы манифест правильно добавлялся и ваше приложение распознавалось как PWA?
  • 29 февраля 2024 г. 8:38
Ответы на вопрос 1
В Nuxt 3 файл manifest не отображается потому, что Nuxt 3 использует новую систему сборки на основе Vite, в отличие от предыдущих версий Nuxt на основе Webpack, и требует новых настроек для PWA.

Для настройки PWA в Nuxt 3 с использованием библиотеки @vite-pwa/nuxt, вам необходимо создать файл `vite.config.ts` в корневой директории вашего проекта и добавить следующий код:

```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePWA from '@vitejs/plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      manifest: {
        name: 'Your App Name',
        short_name: 'Your App',
        themes: [
          {
            name: 'white',
            background: '#ffffff',
            icons: 'light',
          },
          {
            name: 'black',
            background: '#333333',
            icons: 'dark',
          },
        ],
      },
    }),
  ],
})
```

Замените `'Your App Name'` на имя вашего приложения. После добавления этого кода, Vite будет использовать плагин PWA для генерации манифеста при сборке проекта.

Также, убедитесь что ваш файл `nuxt.config.js` содержит следующую настройку:

```javascript
export default {
  // ...
  build: {
    viteArgs: {
      commonjsOptions: {
        ignoreDynamicRequires: true,
      },
    },
  },
  // ...
}
```

Теперь ваше приложение должно быть правильно настроено для PWA и распознаваться как таковое.
Похожие вопросы