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:

Credits

--

--

--

A computer programmer(Fullstack developer) and tech enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Tricks You Won’t Find in Most Tutorials

Primitive VS Non-Primitive/Reference Type In JavaScript

How to FIX: Postman Collection Format v1 is no longer supported

JSDC.TW Transcript: Building Mobile Devices With the Open Web

How to Run Micro Services in Moleculer js?

Building Vue Components so Back-End Developers Won’t Hate You

A Deep Dive Into the NestJS Injection Scope

Tricks for writing maintainable Front-end code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AJALA ABDULSAMII

AJALA ABDULSAMII

A computer programmer(Fullstack developer) and tech enthusiast

More from Medium

7 Good Reasons to use Symfony for Web Development in 2022

The Pros and Cons of Codeacademy Pro

4 Reasons Aspiring Web Developers Do Not Freelance

How Angular Development Services Can Help You In Expanding Your Business?