nuxt / vite

🧪 Vite mode is experimental and many nuxt modules are still incompatible

If found a bug, please report via issues with a minimal reproduction

✔️ What is working?

• Using vite in development
• Basic server-side rendering
• Basic Hot-Module-Replacement
• Nuxt plugins
• Nuxt components
• Vuex store
• Page middleware
• HTTP module
• Axios module (works with --spa)
• Composition API
• Content module
• Tailwindcss module

⚡ Usage

Install package:

yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite

Add to buildModules:

// nuxt.config
export default {
  buildModules: [
    'nuxt-vite'
  ]
}

Note: Nuxt >= 2.15.0 is required

🐛 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 recommands explicitly defining extensions for non javascript assets.

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

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 still having, please add version and error in #2

.gql support

Curretnly 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
        }
    }
}

🤔 How it works

Nuxt uses has a powerful hooking system to extend internals.

Default bundler (@nuxt/webpack) can be replaced by a nuxt module. nuxt-vite replaces webpack by a similar interface to use vite instead of webpack. (see src/index.ts and src/vite.ts)

Client-side modules are loaded on demand using vite middleware

Server-side bundle is being created by another vite instance and written to filesystem and passed using hooks to nuxt server-renderer. Current approach is not most efficient due to usage of filesystem, extra build and lack of lazy loading. Yet much faster than webpack builds. You can opt-out SSR build using nuxt dev --spa.

❤️ Credits

This module could not be possible without vite-plugin-vue2 by @underfin

License

MIT - Nuxt Team