Getting Started with Nuxt.js on Now

This guide will help you get started using Nuxt.js with Now by covering a variety of topics from Installing Now to deploying your Nuxt.js application with a single command.

Nuxt.js is a modular, performant and enjoyable framework, created by Alexandre Chopin and Sebastien Chopin, for creating production-ready and lightning-fast Vue applications. It’s currently based on my opinion best, most stable and optimized implementation of SSR (Server Side Rendered) with VueJS.

Installing Now

If you already have “Now” installed, you can skip this step.

To get started with “Now”, you must first install it. For your convenience, multiple options have been provided for installation, including the Now Desktop app, or Now CLI with Yarn, npm, or Curl.

You can find installation instructions for all the available options on the download page.

GitHub and GitLab Integrations

To enhance your development experience with Now further, with automatic deployments, aliasing, and more, integrations are provided by Vercel with both GitHub and Gitlab.

For more information, the links above outline the key features and the benefits their Git integrations bring to your workflow.

Step 1: Creating the Project

To get started, create a project directory and navigate into it:

npx create-nuxt-app my-nuxtjs-project

Choose your desired options and configurations then navigate into your project directory like so:

cd my-nuxtjs-project

Step 2: Create a now.json and .nowignore

The now.json is your configuration file that determines how now works with your project (at the development stage and also for deployment)

Create your now.json file and set it up with configurations like so

{
  "name": "project name",
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {}
    }
  ],
   "alias": [
     "nuxt.yourdomain.com",
     "another-alias.yourdomain.com"
  ],
  "routes": [
    { "src": "/_nuxt/.+", "headers": { "cache-control": "s-maxage=31536000" } },
    { "src": "/(.*)", "dest": "/" }
  ]
}

You can consider the code above a template. Modify it and extend it based on your own use case. Check out the docs on other options and more things you can do with your project in development and in production.

The .nowignore file works similarly like the .gitignore and it’s used to inform the now-cli what to ignore when working with your project.

Step 3: Cloud Deployment

To deploy your project to now along with aliasing to your desired domain, simply run

now && now alias

If you’re not yet logged in to your now account, you must have gotten an error message by now, simply run

now login

after successful login, run the initial command for deployment and aliasing again.

Bonus

DNS Configurations for Now

With a CNAME record and a TXT domain verification on your domain DNS settings, you can get up and running with no stress. Check this link out on how to manage your domains mapping and aliasing.

Further Guides for other variation of projects

You can get your project started in seconds by building on top of these examples with the help of now init:

now init

After entering the now init command, you will be presented with a list of projects to choose from the Now Examples GitHub repository.

All of these examples are immediately ready for either local development or cloud deployment to help you get your project up and running as quickly as possible.

Resources

For more information on working with Nuxt, please refer to the NuxtJS documentation

To configure Now further, please see these additional topics and guides:

• Deployment basics
  Deploy any of your applications with Vercel Now
• Aliasing
  Learn about aliasing to your deployments
• Routes
  Learn how to develop powerful custom routes for your application
• More Guides
  See more guides that will help you move forward with your projects and deployments.

Credits

• Article adapted from Getting Started with Next.js and Now by Written By Timothy & msweeneydev