Nuxt

https://v2.nuxt.com/docs
Admin
Nuxt is a progressive Vue.js framework for building universal and static-generated web applications...
Tokens:66,180
Snippets:956
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Example Usage of nuxt.renderAndGetWindow

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt-render-and-get-window

This example demonstrates how to load a Nuxt application, listen on a port, render a specific URL to get the window object, and then close the Nuxt instance. It's useful for testing the rendered output of your Nuxt application.

```javascript
const { loadNuxt } = require('nuxt')

async function init() {
  // Assuming you've already built your project
  const nuxt = await loadNuxt({ for: 'start' })
  await nuxt.listen(3000)
  const window = await nuxt.renderAndGetWindow('http://localhost:3000')
  // Display the head `<title>`
  console.log(window.document.title)
  nuxt.close()
}

init()

```

--------------------------------

### Complex Store Folder Structure Example

Source: https://v2.nuxt.com/docs/directory-structure/store

An example file and folder structure for a complex Nuxt 2 Vuex store setup, demonstrating nested modules and file-based configurations.

```treeview
 store/
--| index.js
--| ui.js
--| shop/
----| cart/
------| actions.js
------| getters.js
------| mutations.js
------| state.js
----
----| products/
------| mutations.js
------| state.js
------| itemsGroup1/
--------| state.js
```

--------------------------------

### Redirect to router.base Hook Setup

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-hooks

This example shows how to configure `router.base` and set up a custom hook to handle redirection when the application is not served from the root path during local development.

```javascript
import hooks from './hooks'
export default {
  router: {
    base: '/portal'
  }
  hooks: hooks(this)
}
```

--------------------------------

### Install v-tooltip

Source: https://v2.nuxt.com/docs/directory-structure/plugins

Install the v-tooltip library for adding tooltips to your application. Use either Yarn or NPM for installation.

```bash
yarn add v-tooltip
```

```bash
npm install v-tooltip
```

--------------------------------

### Ant Design Vue Plugin Setup

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-plugins

Example of setting up the Ant Design Vue plugin, including CSS import.

```javascript
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' // Per Ant Design's docs

Vue.use(Antd)

```

--------------------------------

### Install prism-themes with NPM

Source: https://v2.nuxt.com/docs/directory-structure/content

Install the prism-themes package using NPM for syntax highlighting.

```bash
npm install prism-themes

```

--------------------------------

### Start Production Server (NPM)

Source: https://v2.nuxt.com/docs/get-started/commands

Starts the production server after the application has been built. Suitable for Node.js hosting environments.

```bash
npm run start
```

--------------------------------

### Install prism-themes with Yarn

Source: https://v2.nuxt.com/docs/directory-structure/content

Install the prism-themes package using Yarn for syntax highlighting.

```bash
yarn add prism-themes

```

--------------------------------

### Generate and Start Nuxt 2 Static Site

Source: https://v2.nuxt.com/docs/features/live-preview

Commands to generate the static site and start the local server for testing the live preview feature.

```bash
yarn generate
yarn start
```

```bash
npx nuxt generate
npx nuxt start
```

--------------------------------

### Start Production Server (Yarn)

Source: https://v2.nuxt.com/docs/get-started/commands

Starts the production server after the application has been built. Suitable for Node.js hosting environments.

```bash
yarn start
```

--------------------------------

### Install jsdom for nuxt.renderAndGetWindow

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt-render-and-get-window

Before using `nuxt.renderAndGetWindow`, you need to install the `jsdom` package as a development dependency.

```bash
npm install --save-dev jsdom

```

--------------------------------

### Configure Modern Build and Start Scripts

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-modern

Add these scripts to your `package.json` to easily build and start your Nuxt application with modern bundles enabled.

```json
{
  "scripts": {
    "build:modern": "nuxt build --modern=server",
    "start:modern": "nuxt start --modern=server"
  }
}
```

--------------------------------

### Install @nuxtjs/axios

Source: https://v2.nuxt.com/docs/directory-structure/plugins

Install the Axios module for making HTTP requests. This is typically done using Yarn or NPM.

```bash
yarn add @nuxtjs/axios
```

```bash
npm install @nuxtjs/axios
```

--------------------------------

### Vuex Store Initialization Example

Source: https://v2.nuxt.com/docs/directory-structure/store

Illustrates how Nuxt internally constructs the Vuex.Store instance with root state and namespaced modules based on the store directory structure.

```javascript
new Vuex.Store({
  state: () => ({
    counter: 0
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        add(state, { text }) {
          state.list.push({
            text,
            done: false
          })
        },
        remove(state, { todo }) {
          state.list.splice(state.list.indexOf(todo), 1)
        },
        toggle(state, { todo }) {
          todo.done = !todo.done
        }
      }
    }
  }
})
```

--------------------------------

### Nuxt 2 Script Configuration for Development and Production

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-dev

Define npm scripts for starting the development server, building the application, and starting in production mode.

```json
{
  "scripts": {
    "dev": "node server.js",
    "build": "nuxt build",
    "start": "NODE_ENV=production node server.js"
  }
}
```

--------------------------------

### Launch Nuxt Development Server (NPM)

Source: https://v2.nuxt.com/docs/get-started/commands

Use this command to start the Nuxt development server with hot module replacement enabled.

```bash
npm run dev
```

--------------------------------

### Install Build Module with Yarn

Source: https://v2.nuxt.com/docs/directory-structure/modules

Use this command to install a module as a development dependency when using Yarn.

```bash
yarn add --dev @nuxtjs/eslint-module
```

--------------------------------

### Run Nuxt Project with NPM

Source: https://v2.nuxt.com/docs/get-started/installation

After creating a Nuxt project, navigate to the project directory and use this command to start the development server with NPM.

```bash
cd <project-name>
npm run dev
```

--------------------------------

### Component Directory Structure

Source: https://v2.nuxt.com/docs/features/component-discovery

Example of a typical Nuxt components directory structure.

```vue
| components/
--| TheHeader.vue
--| TheFooter.vue
```

--------------------------------

### Run Nuxt Project with PNPM

Source: https://v2.nuxt.com/docs/get-started/installation

After creating a Nuxt project, navigate to the project directory and use this command to start the development server with PNPM.

```bash
cd <project-name>
pnpm dev
```

--------------------------------

### Launch Nuxt Development Server (Yarn)

Source: https://v2.nuxt.com/docs/get-started/commands

Use this command to start the Nuxt development server with hot module replacement enabled.

```bash
yarn dev
```

--------------------------------

### Install Build Module with NPM

Source: https://v2.nuxt.com/docs/directory-structure/modules

Use this command to install a module as a development dependency when using NPM.

```bash
npm install --save-dev @nuxtjs/eslint-module
```

--------------------------------

### Adding a Prefix to Static Asset Paths

Source: https://v2.nuxt.com/docs/directory-structure/static

This example shows how to manually add a prefix to static asset paths, which is useful if you customize `router.base`.

```html
<img :src="`${yourPrefix}/my-image.png`" />
```

--------------------------------

### Run Nuxt Project with Yarn

Source: https://v2.nuxt.com/docs/get-started/installation

After creating a Nuxt project, navigate to the project directory and use this command to start the development server with Yarn.

```bash
cd <project-name>
yarn dev
```

--------------------------------

### Install Sass and Sass-loader

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-css

Install the necessary packages for using Sass in your Nuxt 2 project.

```bash
yarn add --dev sass sass-loader@10
```

```bash
npm install --save-dev sass sass-loader@10
```

--------------------------------

### Start Nuxt.js Project with NPM

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to run your Nuxt.js application in development mode with NPM. The application will be available at http://localhost:3000.

```bash
npm run dev

```

--------------------------------

### Fetch Hook Usage Example

Source: https://v2.nuxt.com/docs/features/data-fetching

Demonstrates how to use the fetch hook to retrieve data and assign it to component properties. It also shows configuration options like fetchOnServer, fetchKey, and fetchDelay.

```javascript
export default {
  data: () => ({
    posts: []
  }),
  async fetch() {
    this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
  },
  fetchOnServer: false,
  // multiple components can return the same `fetchKey` and Nuxt will track them both separately
  fetchKey: 'site-sidebar',
  // alternatively, for more control, a function can be passed with access to the component instance
  // It will be called in `created` and must not depend on fetched data
  fetchKey(getCounter) {
    // getCounter is a method that can be called to get the next number in a sequence
    // as part of generating a unique fetchKey.
    return this.someOtherData + getCounter('sidebar')
  }
}
```

--------------------------------

### Install Sass and Sass-Loader (NPM)

Source: https://v2.nuxt.com/docs/directory-structure/assets

Install the `sass` and `sass-loader` packages using NPM for Sass compilation in Nuxt 2.

```bash
npm install --save-dev sass sass-loader@10

```

--------------------------------

### Nested Component Directory Structure

Source: https://v2.nuxt.com/docs/features/component-discovery

Example of a nested directory structure for components.

```vue
| components/
--| base/
----| foo/
------| Button.vue
```

--------------------------------

### Install Sass and Sass-Loader (Yarn)

Source: https://v2.nuxt.com/docs/directory-structure/assets

Install the `sass` and `sass-loader` packages using Yarn for Sass compilation in Nuxt 2.

```bash
yarn add --dev sass sass-loader@10

```

--------------------------------

### Example Directory Structure for Child Routes

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-router

Illustrates a typical directory structure in Nuxt.js for managing parent and child routes, including dynamic slugs.

```text
-| pages/
---| index.vue
---| posts.vue
---| posts/
-----| _slug.vue
-----| index.vue
```

--------------------------------

### Install Nuxt with NPM

Source: https://v2.nuxt.com/docs/get-started/installation

Add Nuxt as a project dependency using NPM. This command also creates node_modules and a lock file.

```bash
npm install nuxt
```

--------------------------------

### Redirect Examples in Nuxt 2

Source: https://v2.nuxt.com/docs/internals-glossary/context

Shows how to use the redirect function within the Nuxt context to navigate users to different routes or external URLs.

```javascript
redirect(302, '/login')
redirect({ name: 'slug', params: { slug: mySlug } })
redirect('https://vuejs.org')
```

--------------------------------

### Install Nuxt with PNPM

Source: https://v2.nuxt.com/docs/get-started/installation

Add Nuxt as a project dependency using PNPM. This command also creates node_modules and a lock file.

```bash
pnpm add nuxt --shamefully-hoist
```

--------------------------------

### Programmatic Nuxt Server Setup

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-dev

Instantiate Nuxt programmatically in a server.js file. The server builds in development mode if the 'dev' property is true.

```javascript
const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
const port = process.env.PORT || 3000

// We instantiate Nuxt with the options
const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
app.use(nuxt.render)

// Build only in dev mode
if (config.dev) {
  new Builder(nuxt).build()
}

// Listen the server
app.listen(port, '0.0.0.0').then(() => {
  console.log(`Server is listening on port: ${port}`)
})
```

--------------------------------

### Start Nuxt.js Project with PNPM

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to run your Nuxt.js application in development mode with PNPM. The application will be available at http://localhost:3000.

```bash
pnpm dev

```

--------------------------------

### Specify Component Extensions

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-components

Configure the file extensions to scan for components. This example limits scanning to `.vue` files, useful for multi-file component structures.

```javascript
// nuxt.config.js
export default {
  components: [{ path: '~/components', extensions: ['vue'] }]
}
```

--------------------------------

### Install Nuxt with Yarn

Source: https://v2.nuxt.com/docs/get-started/installation

Add Nuxt as a project dependency using Yarn. This command also creates node_modules and a lock file.

```bash
yarn add nuxt
```

--------------------------------

### Asynchronous nuxtServerInit Action

Source: https://v2.nuxt.com/docs/directory-structure/store

Implement asynchronous `nuxtServerInit` actions using `async/await` to ensure the Nuxt server waits for completion before proceeding. This example dispatches another action.

```javascript
actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}
```

--------------------------------

### Nuxt Render with Express Example

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt-render

Integrates Nuxt.js as middleware within an Express.js application. This example demonstrates loading Nuxt in development or production mode and using `nuxt.render` to handle all incoming requests.

```javascript
const { loadNuxt, build } = require('nuxt')

const app = require('express')()
const isDev = process.env.NODE_ENV !== 'production'
const port = process.env.PORT || 3000

async function start() {
  // We get Nuxt instance
  const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

  // Render every route with Nuxt
  app.use(nuxt.render)

  // Build only in dev mode with hot-reloading
  if (isDev) {
    build(nuxt)
  }
  // Listen the server
  app.listen(port, '0.0.0.0')
  console.log('Server listening on `localhost:' + port + '`.')
}

start()

```

--------------------------------

### Using Custom Path Component

Source: https://v2.nuxt.com/docs/features/component-discovery

Example of using a component from a custom path in a page template.

```vue
<FooButton />
```

--------------------------------

### Customizing Nuxt 2 Directories

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-dir

Example of how to specify custom directory names for various application components in Nuxt 2's nuxt.config.js.

```javascript
export default {
  dir: {
    assets: 'custom-assets',
    app: 'custom-app',
    layouts: 'custom-layouts',
    middleware: 'custom-middleware',
    pages: 'custom-pages',
    static: 'custom-static',
    store: 'custom-store'
  }
}
```

--------------------------------

### Example .nuxtignore File

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-ignore

Use a .nuxtignore file to specify glob patterns for files that Nuxt should ignore in the root directory during the build phase. This file follows the .gitignore specification.

```ignore
# ignore layout foo.vue
layouts/foo.vue
# ignore layout files whose name ends with -ignore.vue
layouts/*-ignore.vue

# ignore page bar.vue
pages/bar.vue
# ignore page inside ignore folder
pages/ignore/*.vue

# ignore store baz.js
store/baz.js
# ignore store files match *.test.*
store/ignore/*.test.*

# ignore middleware files under foo folder except foo/bar.js
middleware/foo/*.js
!middleware/foo/bar.js

```

--------------------------------

### Render Hook Setup

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-hooks

This hook module configures middleware for the render process, specifically setting up a route redirect to handle the `router.base` configuration.

```javascript
import redirectRootToPortal from './route-redirect-portal'

export default nuxtConfig => {
  const router = Reflect.has(nuxtConfig, 'router') ? nuxtConfig.router : {}
  const base = Reflect.has(router, 'base') ? router.base : '/portal'

  return {
    /**
     * 'render:setupMiddleware'
     * {@link node_modules/nuxt/lib/core/renderer.js}
     */
    setupMiddleware(app) {
      app.use('/', redirectRootToPortal(base))
    }
  }
}
```

--------------------------------

### Start Nuxt.js Project with Yarn

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to run your Nuxt.js application in development mode with Yarn. The application will be available at http://localhost:3000.

```bash
yarn dev

```

--------------------------------

### Create Project Directory and Navigate

Source: https://v2.nuxt.com/docs/get-started/installation

Manually set up a Nuxt project by creating a new directory and navigating into it using the terminal.

```bash
mkdir <project-name>
cd <project-name>
```

--------------------------------

### Conditionally Transpile Dependencies

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-build

Transpile specific dependencies with Babel based on build conditions. This example transpiles the 'ky' package only when Nuxt is not in modern mode.

```javascript
{
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky']
  }
}
```

--------------------------------

### Render a Route with Nuxt.js

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt-render-route

Demonstrates how to use `nuxt.renderRoute` to render a specific route ('/') after loading a Nuxt instance in start mode. Ensure `nuxt build` has been executed prior to running this script. The returned object contains `html`, `error`, and `redirected` properties.

```javascript
const { loadNuxt, build } = require('nuxt')

async function start() {
  // Get nuxt instance for start (production mode)
  // Make sure to have run `nuxt build` before running this script
  const nuxt = await loadNuxt({ for: 'start' })

  const { html, error, redirected } = await nuxt.renderRoute('/')

  // `html` will always be a string

  // `error` not null when the error layout is displayed, the error format is:
  // { statusCode: 500, message: 'My error message' }

  // `redirected` is not `false` when `redirect()` has been used in `asyncData()` or `fetch()`
  // { path: '/other-path', query: {}, status: 302 }
}

start()

```

--------------------------------

### Custom Module Implementation

Source: https://v2.nuxt.com/docs/directory-structure/modules

An example of a custom Nuxt module written in JavaScript. It logs module options and Nuxt options, and registers a hook for when Nuxt is ready.

```javascript
export default function ExampleModule(moduleOptions) {
  console.log(moduleOptions.token) // '123'
  console.log(this.options.exampleMsg) // 'hello'

  this.nuxt.hook('ready', async nuxt => {
    console.log('Nuxt is ready')
  })
}

// REQUIRED if publishing the module as npm package
module.exports.meta = require('./package.json')
```

--------------------------------

### Create Core Directories and Config File

Source: https://v2.nuxt.com/docs/get-started/directory-structure

Use these commands to set up essential directories and the Nuxt configuration file for a new project.

```bash
mkdir components assets static
touch nuxt.config.js

```

--------------------------------

### Customizing PostCSS Plugins

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-build

This example shows how to customize the default PostCSS configuration by disabling certain plugins and adding new ones. It demonstrates disabling `postcss-url` and adding `postcss-nested`, `postcss-responsive-type`, and `postcss-hexrgba`. The `preset.autoprefixer.grid` option is also configured.

```javascript
export default {
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          // Disable `postcss-url`
          'postcss-url': false,
          // Add some plugins
          'postcss-nested': {},
          'postcss-responsive-type': {},
          'postcss-hexrgba': {}
        },
        preset: {
          autoprefixer: {
            grid: true
          }
        }
      }
    }
  }
}
```

--------------------------------

### Nuxt Project Scripts in package.json

Source: https://v2.nuxt.com/docs/get-started/installation

Define essential Nuxt commands (dev, build, generate, start) within the 'scripts' section of your package.json file.

```json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}
```

--------------------------------

### Custom Loading Component Example

Source: https://v2.nuxt.com/docs/features/loading

This Vue component can be used as a custom loading indicator in Nuxt. It exposes `start` and `finish` methods to control its visibility during route changes.

```vue
<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>
```

--------------------------------

### Hooking into a Custom Module Event

Source: https://v2.nuxt.com/docs/internals-glossary/internals

Demonstrates how to listen for and respond to a custom module hook ('foo' in this example) within the Nuxt instance. This enables event-driven interactions between modules.

```javascript
nuxt.hook('foo', foo => {
  // ...
})

```

--------------------------------

### Nuxt Loading Component Methods

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-loading

Example of how to programmatically control the Nuxt loading bar within a Vue component. This is typically used to manually start and finish the loading indicator.

```javascript
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}


```

--------------------------------

### Initialize Nuxt Programmatically

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt

Use this snippet to load a Nuxt instance programmatically for use in your own server. It supports loading in development mode with live reloading or in start mode for production.

```javascript
const { loadNuxt, build } = require('nuxt')

// Check if we need to run Nuxt in development mode
const isDev = process.env.NODE_ENV !== 'production'

// Get a ready to use Nuxt instance
const nuxt = await loadNuxt(isDev ? 'dev' : 'start')

// Enable live build & reloading on dev
if (isDev) {
  build(nuxt)
}

// We can use `nuxt.render(req, res)` or `nuxt.renderRoute(route, context)`

```

--------------------------------

### Nuxt Mountains Component Example

Source: https://v2.nuxt.com/docs/features/data-fetching

Demonstrates fetching data for a list of mountains and displaying loading, error, or content states. Includes a button to manually refresh the data.

```vue
<template>
  <div>
    <p v-if="$fetchState.pending">Fetching mountains...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt Mountains</h1>
      <ul>
        <li v-for="mountain of mountains">{{ mountain.title }}</li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>
```

--------------------------------

### Programmatically Start and Finish Loading Bar

Source: https://v2.nuxt.com/docs/features/loading

Manually control the loading bar's visibility within components using `$nuxt.$loading.start()` and `$nuxt.$loading.finish()`. Ensure the loading property is available by using `$nextTick` in the `mounted` hook.

```javascript
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}
```

--------------------------------

### Configure Environment Variables in nuxt.config.js

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-env

Define environment variables that will be available on the client side. This example sets a `baseUrl` using a server-side environment variable or a default value.

```javascript
export default {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}
```

--------------------------------

### Create Project Directory and Package JSON

Source: https://v2.nuxt.com/docs

Manually create a project directory and initialize a package.json file for a Nuxt project.

```bash
mkdir <project-name>
cd <project-name>
```

```bash
touch package.json
```

--------------------------------

### Create Pages Directory and Index Page

Source: https://v2.nuxt.com/docs

Set up the 'pages' directory and create an 'index.vue' file for the home page route.

```bash
mkdir pages
```

```bash
touch pages/index.vue
```

--------------------------------

### Install Pug and Sass Loaders (NPM)

Source: https://v2.nuxt.com/docs/features/configuration

Install the necessary webpack loaders for Pug and Sass when using them in your Nuxt 2 project via NPM.

```bash
npm install --save-dev pug pug-plain-loader
npm install --save-dev sass sass-loader@10
```

--------------------------------

### Install Pug and Sass Loaders (Yarn)

Source: https://v2.nuxt.com/docs/features/configuration

Install the necessary webpack loaders for Pug and Sass when using them in your Nuxt 2 project via Yarn.

```bash
yarn add --dev pug pug-plain-loader
yarn add --dev sass sass-loader@10
```

--------------------------------

### Accessing Preview Mode URL

Source: https://v2.nuxt.com/docs/features/live-preview

Append `?preview=true` to any page URL to activate live preview mode when serving the generated static site locally.

```bash
?preview=true
```

--------------------------------

### Register Nuxt Listen Hook

Source: https://v2.nuxt.com/docs/directory-structure/modules

Registers a hook to execute custom code when the Nuxt internal server starts listening.

```javascript
nuxt.hook('listen', async (server, { host, port }) => {
  // Your custom code here
})
```

--------------------------------

### Vue Template Image Reference

Source: https://v2.nuxt.com/docs/directory-structure/assets

An example of referencing an image asset within a Vue template using the '~' alias.

```html
<template>
  <img src="~/assets/image.png" />
</template>
```

--------------------------------

### Create package.json file

Source: https://v2.nuxt.com/docs/get-started/installation

Create an empty package.json file in your project directory. This file manages project metadata and scripts.

```bash
touch package.json
```

--------------------------------

### Basic Module Usage in nuxt.config.js

Source: https://v2.nuxt.com/docs/directory-structure/modules

Shows how to register a custom module using its relative path and how to pass options to it.

```javascript
export default {
  exampleMsg: 'hello',
  modules: [
    // Simple usage
    '~/modules/example',
    // Passing options directly
    ['~/modules/example', { token: '123' }]
  ]
}
```

--------------------------------

### Create Nuxt App with NPM

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to quickly scaffold a new Nuxt.js project with NPM. It will prompt you for configuration options.

```bash
npm init nuxt-app <project-name>
```

--------------------------------

### Add User Agent to Context

Source: https://v2.nuxt.com/docs/directory-structure/middleware

Example of a middleware that adds the user agent to the Nuxt context. This middleware runs on both server and client.

```javascript
export default function (context) {
  // Add the userAgent property to the context
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}
```

--------------------------------

### Configure Vue.config in nuxt.config.js

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-vue-config

Use the vue.config property in your nuxt.config.js file to set Vue.config options. This example configures productionTip and devtools.

```javascript
export default {
  vue: {
    config: {
      productionTip: true,
      devtools: false
    }
  }
}
```

--------------------------------

### Configure ignoreOptions in nuxt.config.js

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-ignore

Customize the behavior of the file ignoring mechanism by configuring ignoreOptions in your nuxt.config.js. This example sets ignorecase to false.

```javascript
export default {
  ignoreOptions: {
    ignorecase: false
  }
}


```

--------------------------------

### Generate Static Site (NPM)

Source: https://v2.nuxt.com/docs/get-started/commands

Generates all routes as static HTML files for deployment on static hosting services.

```bash
npm run generate
```

--------------------------------

### Reorder Nuxt 2 Plugins

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-extend-plugins

Use extendPlugins to change the order of plugins. This example moves a specific plugin to the beginning of the array.

```javascript
export default {
  extendPlugins(plugins) {
    const pluginIndex = plugins.findIndex(
      plugin => (typeof plugin === 'string' ? plugin : plugin.src) === '~/plugins/shouldBeFirst.js'
    )
    const shouldBeFirstPlugin = plugins[pluginIndex]

    plugins.splice(pluginIndex, 1)
    plugins.unshift(shouldBeFirstPlugin)

    return plugins
  }
}
```

--------------------------------

### Initialize Store with Server Data

Source: https://v2.nuxt.com/docs/directory-structure/store

Use the `nuxtServerInit` action in `store/index.js` to pass server-side data, like user sessions, to the client-side store during universal mode.

```javascript
actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
```

--------------------------------

### Basic generate Configuration

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-generate

Configure the generation of your universal web application to a static web application.

```javascript
export default {
  generate: {
    ...
  }
}
```

--------------------------------

### Create Nuxt App with NPX

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to quickly scaffold a new Nuxt.js project with NPX. It will prompt you for configuration options.

```bash
npx create-nuxt-app <project-name>
```

--------------------------------

### Configure Nuxt 2 to Use Preview Plugin

Source: https://v2.nuxt.com/docs/features/live-preview

Register the `preview.client.js` plugin in your `nuxt.config.js` file to enable the live preview functionality.

```javascript
export default {
  plugins: ['~/plugins/preview.client.js']
}
```

--------------------------------

### Define Page Transition Type

Source: https://v2.nuxt.com/docs/components-glossary/transition

You can define the page transition type as a String, Object, or Function. This example shows the basic structure for all three.

```javascript
export default {
  // Can be a String
  transition: ''
  // Or an Object
  transition: {}
  // or a Function
  transition (to, from) {}
}
```

--------------------------------

### Configuring Nuxt 2 Modules

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-modules

Demonstrates various ways to include modules in the `nuxt.config.js` file, including package names, relative paths, modules with options, and inline function definitions.

```javascript
export default {
  modules: [
    // Using package name
    '@nuxtjs/axios',

    // Relative to your project srcDir
    '~/modules/awesome.js',

    // Providing options
    ['@nuxtjs/google-analytics', { ua: 'X1234567' }],

    // Inline definition
    function () {}
  ]
}
```

--------------------------------

### Module Options with Top-Level Configuration

Source: https://v2.nuxt.com/docs/directory-structure/modules

Illustrates how to provide module-specific options in `nuxt.config.js` and how a module can access these options alongside top-level Nuxt configurations.

```javascript
export default {
  modules: [['@nuxtjs/axios', { anotherOption: true }]],

  // axios module is aware of this by using `this.options.axios`
  axios: {
    option1,
    option2
  }
}
```

--------------------------------

### Configure Resource Preload and Prefetch

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-render

Configure default behavior for shouldPrefetch and shouldPreload to control <link> tag generation for external resources.

```javascript
export default {
  render: {
    bundleRenderer: {
      shouldPrefetch: () => false,
      shouldPreload: (fileWithoutQuery, asType) => ["script", "style"].includes(asType),
    },
  },
}
```

--------------------------------

### Registering a Tapable Plugin Globally

Source: https://v2.nuxt.com/docs/internals-glossary/internals-module-container

Register a hook on the 'ready' lifecycle event using the global Nuxt instance. This hook executes after all modules have been initialized.

```javascript
nuxt.moduleContainer.plugin('ready', async moduleContainer => {
  // Do this after all modules where ready
})
```

--------------------------------

### Handling Unknown Dynamic Nested Routes with _.vue

Source: https://v2.nuxt.com/docs/features/file-system-routing

This file tree structure demonstrates how to use `_.vue` to dynamically match nested paths, useful for handling routes with unknown depth and custom 404 logic.

```javascript
pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue
```

--------------------------------

### Custom Scroll Behavior

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-router

Define custom scroll behavior between routes by providing a function. This example forces the scroll position to the top for all route changes.

```javascript
export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
```

--------------------------------

### Configure Prism theme in nuxt.config.js

Source: https://v2.nuxt.com/docs/directory-structure/content

Configure the Prism theme for syntax highlighting within the Nuxt Content module. This example sets the theme to prism-material-oceanic.

```javascript
content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

```

--------------------------------

### Create Nuxt App with PNPM

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to quickly scaffold a new Nuxt.js project with PNPM. It will prompt you for configuration options.

```bash
pnpm create nuxt-app <project-name>
```

--------------------------------

### Enable Following Symlinks in Build

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-build

Set `build.followSymlinks` to `true` to allow the build process to scan files within symbolic links. This is useful for including symlinked directories, such as those in the `pages` folder.

```javascript
export default {
  build: {
    followSymlinks: true
  }
}
```

--------------------------------

### Configure PostCSS Plugins in nuxt.config.js

Source: https://v2.nuxt.com/docs/features/configuration

Add or disable PostCSS plugins and configure presets within the nuxt.config.js file. Ensure plugins are installed as project dependencies.

```javascript
export default {
  build: {
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}
```

--------------------------------

### Namespaced Vuex Module: Todos

Source: https://v2.nuxt.com/docs/directory-structure/store

Example of a namespaced Vuex module for managing a list of todos. Includes mutations for adding, removing, and toggling todo items.

```javascript
export const state = () => ({
  list: []
})

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    })
  },
  remove(state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle(state, todo) {
    todo.done = !todo.done
  }
}
```

--------------------------------

### Registering a Tapable Plugin Within a Module

Source: https://v2.nuxt.com/docs/internals-glossary/internals-module-container

Register a hook on the 'ready' lifecycle event from within a module's context. This allows modules to react to the initialization of other modules.

```javascript
this.plugin('ready', async moduleContainer => {
  // Do this after all modules where ready
})
```

--------------------------------

### nuxt.renderAndGetWindow(url, options)

Source: https://v2.nuxt.com/docs/internals-glossary/nuxt-render-and-get-window

Retrieves the window object from a specified Nuxt application URL. This function is primarily intended for testing scenarios. It requires the `jsdom` package to be installed.

```APIDOC
## nuxt.renderAndGetWindow(url, options)

### Description
Gets the `window` object from a given URL of a Nuxt Application. This method is made for test purposes.

### Method
`Function`

### Parameters
#### Arguments
1. **url** (`String`) - Required - The URL to render.
2. **options** (`Object`) - Optional - Configuration options.
   - **virtualConsole** (`Boolean`) - Optional - Defaults to `true`.

### Returns
- `Promise` - A Promise that resolves with the `window` object.

### Example
```javascript
const { loadNuxt } = require('nuxt')

async function init() {
  // Assuming you've already built your project
  const nuxt = await loadNuxt({ for: 'start' })
  await nuxt.listen(3000)
  const window = await nuxt.renderAndGetWindow('http://localhost:3000')
  // Display the head `<title>`
  console.log(window.document.title)
  nuxt.close()
}

init()
```
```

--------------------------------

### Including a Plugin by String Path

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-plugins

Include a plugin by providing its path as a string in the plugins array.

```javascript
export default {
  plugins: ['@/plugins/ant-design-vue']
}
```

--------------------------------

### Create Nuxt App with Yarn

Source: https://v2.nuxt.com/docs/get-started/installation

Use this command to quickly scaffold a new Nuxt.js project with Yarn. It will prompt you for configuration options.

```bash
yarn create nuxt-app <project-name>
```

--------------------------------

### Extending Plugins to Change Order

Source: https://v2.nuxt.com/docs/directory-structure/plugins

This example demonstrates how to use the `extendPlugins` property in `nuxt.config.js` to reorder plugins. It finds a specific plugin and moves it to the beginning of the plugins array.

```javascript
export default {
  extendPlugins(plugins) {
    const pluginIndex = plugins.findIndex(
      ({ src }) => src === '~/plugins/shouldBeFirst.js'
    )
    const shouldBeFirstPlugin = plugins[pluginIndex]

    plugins.splice(pluginIndex, 1)
    plugins.unshift(shouldBeFirstPlugin)

    return plugins
  }
}
```

--------------------------------

### Nuxt Configuration with Build Modules

Source: https://v2.nuxt.com/docs/directory-structure/modules

Configure Nuxt to use `buildModules` for development and build-time only modules. This improves production startup speed and reduces the production `node_modules` size.

```javascript
export default {
  buildModules: ['@nuxtjs/eslint-module']
}
```

--------------------------------

### Asynchronous Router Middleware for Stats

Source: https://v2.nuxt.com/docs/directory-structure/middleware

An example of an asynchronous middleware that sends POST request with route information. This middleware is configured in `nuxt.config.js` to run on every route change.

```javascript
import http from 'http'

export default function ({ route }) {
  return http.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}
```

```javascript
export default {
  router: {
    middleware: 'stats'
  }
}
```

--------------------------------

### Extend Routes with Named Views

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-router

Add routes that utilize named views, ensuring to specify corresponding `chunkNames` for the named components. This example adds a modal view.

```javascript
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // or routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}
```

--------------------------------

### Configuring Custom Folder Structure for Plugin File

Source: https://v2.nuxt.com/docs/internals-glossary/internals-module-container

Demonstrates how to specify a custom folder structure for a generated plugin file within the .nuxt directory by using path.join in the fileName option.

```javascript
{
  fileName: path.join('folder', 'foo.client.js'), // will result in `.nuxt/folder/foo.client.js`
}
```

--------------------------------

### Change Route Name Splitter

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-router

Modify the separator used for generating route names from file paths. For example, changing from '-' to '/' for pages like `pages/posts/_id.vue`.

```javascript
export default {
  router: {
    routeNameSplitter: '/'
  }
}
```

--------------------------------

### Object Transition Configuration

Source: https://v2.nuxt.com/docs/components-glossary/transition

Configure transition properties like name and mode using an object. This allows for more detailed control over transitions.

```javascript
export default {
  transition: {
    name: 'test',
    mode: 'out-in'
  }
}
```

```html
<transition name="test" mode="out-in"></transition>
```

--------------------------------

### Using Server Timing API in Middleware

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-server

Utilize the `res.timing` API within server middleware to measure specific operations. The `start` and `end` methods record timing information.

```javascript
export default function (req, res, next) {
  res.timing.start('midd', 'Middleware timing description')
  // server side operation..
  // ...
  res.timing.end('midd')
  next()
}
```

--------------------------------

### Use Axios in Page Components

Source: https://v2.nuxt.com/docs/directory-structure/plugins

Fetch data using the $axios instance within Nuxt page components. This example demonstrates fetching a post by ID using asyncData.

```vue
<template>
  <h1>{{ post.title }}</h1>
</template>

<script>
export default {
    async asyncData ({ $axios, params }) {
      const  post  = await $axios.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
}
</script>
```

--------------------------------

### Configure Generate Output Directory

Source: https://v2.nuxt.com/docs/directory-structure/nuxt-config

Set custom output directory and subfolder behavior for static site generation.

```javascript
export default {
  generate: {
    dir: 'gh_pages', // gh_pages/ instead of dist/
    subFolders: false // HTML files are generated according to the route path
  }
}
```

--------------------------------

### Webpack DefinePlugin Transformation Example

Source: https://v2.nuxt.com/docs/configuration-glossary/configuration-env

Illustrates how webpack's `definePlugin` replaces `process.env.your_var` with its actual value during compilation, changing the code from checking `process.env.test` to checking the literal string.

```javascript
if (process.env.test == 'testing123')
```

```javascript
if ('testing123' == 'testing123')
```
Tokens:
Raw