Nuxt - sgml/signature GitHub Wiki

API

"nuxt" "context" "route" "name" site:v2.nuxt.com middleware

ENV

NUXT_TARGET:

{
  "scripts": {
    "generate": "cross-env NUXT_TARGET=static nuxt generate"
  },
  "devDependencies": {
    "cross-env": "^7.0.3"
  }
}

File Structure

  assets:                    # Asset files such as styles, images
    - ...
  components:                # Vue components
    - ...
  composables:               # Composition API functions
    - ...
  content:                   # Content files for @nuxt/content
    - ...
  layouts:                   # Layout components
    - ...
  middleware:                # Middleware functions
    - ...
  pages:                     # Page components for routing
    - ...
  plugins:                   # Plugins to extend Vue
    - ...
  public:                    # Static assets
    - ...
  server:                    # Server-side code (e.g., API routes)
    - ...
  stores:                    # Pinia or Vuex stores
    - ...

Naming Conventions, Globals, and File Structure

Migrating from Nuxt 2 to Nuxt 3

Pages Directory

New Structure: Nuxt 3 introduces a new directory structure. The pages directory is now used for routing and layout management. In Nuxt 2, you had separate pages and layouts directories.
Dynamic Routes: The format for defining dynamic routes has changed. In Nuxt 2, you used _id for dynamic routes, while in Nuxt 3, you use [id].
Nested Routes: Nuxt 3 uses <NuxtPage> component for nested routes, replacing <Nuxt> and <NuxtChild> from Nuxt 2.
Layouts: Layouts in Nuxt 3 use slots instead of the <Nuxt> component. This allows for more advanced use cases with named and scoped slots.

nuxt.config.js

New Configuration Format: Nuxt 3 uses a new configuration format based on the defineNuxtConfig function, which provides better TypeScript support and an improved developer experience.
TypeScript Support: Nuxt 3 fully embraces TypeScript, making it easier to write type-safe code.
Global Imports: Nuxt 3 automatically identifies and imports core functions like ref and reactive, eliminating the need for manual imports in each component.
Middleware: Nuxt 3 has a revamped middleware system, providing more flexibility and control over your application's behavior.

HTML Specific JavaScript

Update HTML templates to use Vue 3 syntax.
Replace deprecated Vue 2 directives with Vue 3 equivalents.
Ensure all HTML elements are properly bound and updated.

CSS Specific JavaScript

Update CSS classes and styles to match the new Nuxt 3 structure.
Ensure CSS is properly linked and applied to components.
Adjust any CSS-in-JS libraries to work with Vue 3.

VueX to Pinia Specific JavaScript

Replace Vuex store setup with Pinia store setup.
Migrate Vuex actions, mutations, and state to Pinia equivalents.
Update any components that interact with the store to use Pinia.

Routing Specific JavaScript

Update routing configuration to use the new Nuxt 3 pages directory.
Ensure all routes are properly defined and linked to components.
Adjust any programmatic routing code to use the new Nuxt 3 router API.

Static Site Generation via Markdown

Cookbook

CVEs

https://www.cisa.gov/search?g=nuxt

Storybook

Release Notes / Changelogs / Roadmaps

Async Utilities

  async timeout(context, payload) {
    console.warn('waiting', payload)
    await new Promise((resolve) => setTimeout(resolve, payload))
  }

  async foo(context) {
    await context.dispatch('timeout', 1000)
  }

i18N Utilities

// each param replaces the literal; $route is used instead of this.$route
// for each iteration of foo, use foo.id to get the unique URL
localePath({
  name: 'slug-foos-foo-fooid',
  params: { slug: $route.params.slug, fooid: foo.id }
})