NuxtJS V3のロードマップと情報の整理



NuxtJS バージョン3のロードマップ的なものが公表されていたので共有します。



また、NuxtJS Teamの方々のアカウントなどもフォローしておくと、最新の情報をキャッチアップできます。


Nuxt v3 - Internal changes

  • Webpack 5 and Vite support
  • PostCSS 8
  • ESBuild
  • Rewritten in TypeScript
  • vue-bundle-renderer for Vue 3
  • Modules utils
  • New rendering engine: Nitro (see Daniel Roe talk)
  • See Pooya Parsa talk for more details

app.vue - The entry point of your Nuxt app

  • Optional if using pages/ directory
  • Perfect for global data fetching
  • Great for landing pages or app without router
  • Produces 20.68KB gzipped JS

Routing - A powerful routing system based on Vue Router 4

  • pages/_slug.vue becomes pages/[slug].vue
  • Catch sub paths with pages/blog/[...all].vue
  • Support pages/404.vue and pages/_error.vue
  • Ignore prefix is now underscore: pages/_ignored.vue
  • Add routes at runtime with plugins
  • and become

Data Fetching - How to fetch data with Nuxt 3

  • Brainstormed with Evan You
  • Based on the composition API
  • Can pause the page navigation until fetched
  • Support server-side rendering and hydration
  • Works at the component level == everywhere
  • Will support caching (SWR like)
    Support custom data fetcher

More - What are the other changes

  • Auto import of plugins
  • static/ becomes public/
  • app.html becomes document.html
  • Hooks on the app side: app:created, page:finish, etc.
  • Support for multi apps (theming)
  • New functions/ directory for server-only execution
  • First class Serverless support