Now Builder for Nuxt.js

This Now builder takes a Nuxt.js application defined by a nuxt.config entrypoint and deploys it to a Now v2 serverless environment.

It features built-in caching of node_modules and the yarn global cache (even with dependency changes!) and multi-stage build for fast and small deployments.

When to use it

If you are using the Now platform, @nuxtjs/now-builder is the ideal way to ship a fast, production-ready Nuxt.js application that scales automatically.

For more information on why you should use Nuxt.js for your project, see the Nuxt.js website.

How to use it

The first step is to set up a Nuxt.js project.

To get started, make sure you have installed the Nuxt.js dependencies with the following command:

yarn add nuxt

Then, in your project directory, create a pages directory with some example pages, for example; the home index page, pages/index.vue:

<template>
  <div>
    Works!
  </div>
</template>

Create a simple nuxt.config.js file:

export default {
  head: {
    title: 'My Nuxt.js Application!',
  },
}

Then define the build in now.json:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {}
    }
  ]
}

Upon deployment, you will get a URL like this: https://nuxtjs-8fnzfb1ci.now.sh

See Basic Example for a more complete deployable example.

See Deploying two Nuxt apps side-by-side for details on deploying two nuxt apps in one Now Monorepo.

Using with TypeScript

now-builder supports TypeScript runtime compilation, though it does so in a slightly different from @nuxt/typescript-runtime. It adds in a pre-compilation step as part of building the lambda for files not compiled by Webpack, such as nuxt.config.ts, local modules and serverMiddleware.

References to original TS files in strings outside of modules or serverMiddleware may therefore cause unexpected errors.

Configuration

serverFiles

• Type: Array

If you need to include files in the server lambda that are not built by webpack or within static/, such as a local module or serverMiddleware, you may specify them with this option. Each item can be a glob pattern.

Example:

{
  "src": "nuxt.config.js",
  "use": "@nuxtjs/now-builder",
  "config": {
    "serverFiles": ["server-middleware/**"]
  }
}

tscOptions

• Type: Object

If you need to pass TypeScript compiler options to override your tsconfig.json, you can pass them here. See the TypeScript documentation for valid options. Example:

{
  "src": "nuxt.config.ts",
  "use": "@nuxtjs/now-builder",
  "config": {
    "tscOptions": {
      "sourceMap": false
    }
  }
}

Technical details

Dependency installation

Package dependencies are installed with either npm (if a package-lock.json is present) or yarn.

NOTE: Using yarn is HIGHLY recommended due to its autoclean functionality , which can decrease lambda size.

Private npm modules

To install private npm modules, define NPM_TOKEN as a build environment in now.json.

Node.js version

The Node.js version used is the latest 8.10.x release or (if your package.json specifies Node 10 in engines, the latest 10.x release) - see Now documentation.

Troubleshooting

Environment variables

Because of Nuxt.js' approach to environment variables, environment variables present at build time will be compiled into the lambda. They may also be required at runtime, depending on how you are consuming them.

You may, therefore, need to include them in your now.json in both the env and build.env keys (see Now documentation). For example:

  "env": {
    "MY_VARIABLE": true
  },
  "build": {
    "env": {
      "MY_VARIABLE": true
    }
  }

License

MIT License

Documentation and builder inspired by Next.js by Zeit.co

Copyright (c) Nuxt Community