Common Issues

💡 Take a look at issues for known issues and workarounds

Can't find loader handling '.vue' files

While we added a workaround to mitigate this, vite recommends explicitly defining extensions for non javascript assets.

- import MyComponent from '~/components/MyComponent'
+ import MyComponent from '~/components/MyComponent.vue'

Uncaught SyntaxError: The requested module ... does not provide an export named 'default'

Vite has an issue for pre-bundling dependencies with named exports (#56 ). Workaround is to exlude them from optimizeDeps

// nuxt.config
export default {
  vite: {
    optimizeDeps: {
      exclude: [
        'date-fns'
      ]
    }
  }
}

By default some known packages are excluded. Please reply to issue #56 to add more known problematic packages.

No such file or directory, rmdir node_modules/.vite/temp

This is a race condition that server cache dir removes when reloading (vitejs/vite/pull/2299 )

Currently using a fork of vite to address this issue. If you still have the issue, please add version and error in #2

styleResources

styleResources depends on webpack and yet is not supported by nuxt-vite.

You can configure global CSS import using preprocessorOptions option of CSS loader:

Example with SCSS:

export default {
  css: ["@/assets/scss/global.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/global.scss";',
        },
      },
    },
  },
}

Graphql support

Currently there is no module support for handling gql files (#31 ).

Best solution for now is to wrap gql code into js or ts and using graphql-tag or using raw GraphQL queries. Remember to add loc.source.body.

Example:

// queries/products.js
import gql from 'graphql-tag'
export default gql`
  query Products {
    products {
      id
      name
    }
  }
`

// pages/index.vue
import products  from '~/queries/products'
export default {
    async asyncData({ $strapi }) {
        const response = await $strapi.graphql({
            query: products.loc.source.body,
        })
        return {
            response
        }
    }
}

SSR Assets issues

Related to #7 , errors can happen while importing assets from your templates.

An example of breaking import:

<img src="../static/img/logo.svg">

Until this issue is fixed, you need to disable the SSR in development and refer to your images using the complete path from the root folder of your project.

An example of working import:

// nuxt.config.js

export default {
  ssr: false
}

<img src="~/static/img/logo.svg" />