What started as an e-commerce site experiment became a higher-level framework for production-ready Vue applications. The prototype was released to the public a few weeks after the first official release of Next.js. Nuxt was created to solve many of the same problems with building apps for Vue as Next does for React. Today it comes pre-configured with the most crucial elements and intelligent defaults based on well researched best practices to give end-users the best experience.
- JS framework: Vue.js
- Core Maintainer: Alexandre and Sébastien Chopin
- Website: nuxtjs.org
- Founded: 2015
- Github Stars:
- npm downloads:
When first introduced to the public, Nuxt was incredibly lightweight and could only be installed as a template on top of the Vue CLI, a command-line interface to help you develop your application. Even so, it already allowed for server-side rendering as well as to generate a static website.
It was released on the 8th of January 2018 with the help of a few additional contributors and hosted on Now (Vercel). Their documentation is made with Nuxt.js itself and at the time of this release, was already translated into 6 different languages. New features ranged from layout transitions to improved middleware functionality.
2020 brings more opportunities
In May, the NuxtJS company announced its decision to close a $2m seed round. It’s important to note that the creators of the Nuxt.js framework have stated that it will always be an open-source and community-driven project. To stay up-to-date with the latest developments be sure to check out their blog.
This is roughly the default structure you’ll end up with when using depending on how you answer the setup questions. Every directory contains a file explaining what should go inside and includes a link to the documentation. Nice!
In the above structure, there is a directory called which may seem a bit vague, but it was only added because I chose to install the module , a git-based headless CMS. I will demonstrate how to fetch and use the content from later.
Here is a basic example of how to fetch data from . First we need to install the Nuxt module. We also need the module to manage our local environment variables for security purposes. Nuxt has added to our by default.
Next, we set up our private keys in a file at the root of our project:
Then we let Nuxt know about them and add our configuration to :
Lastly, we fetch our data inside our page:
will merge its return value into the component’s local state otherwise known as . We then just need to display it by simply adding the following to our :
I am fetching a single field for example purposes, but already you can see the difficulty you will run into when working with the data structure. It is strongly recommended to use GraphQL and Nuxt provides a module to use for this.
Content by Nuxt
Nuxt provides its own headless CMS which is able to handle Markdown, CSV, YAML, JSON, and XML. As you can see, fetching Markdown from the default is incredibly simple:
To display content use the provided component:
To extend the functionality you can use many available Nuxt modules. The library contains over 140 different modules, from PWA integration to various headless CMS like Prismic, Storyblok, Sanity, and many more.
How to get started?
The easiest way to get started is by using :
You will be asked a series of questions about the various options and technologies you would like to use for this project. Once complete all dependencies will be installed and you can navigate to your project and immediately launch it:
If you navigate to the faq page and scroll the left-hand side menu you will find a section on deployment. Deploying to some of the most popular platforms like Vercel, Netlify, and AWS requires only a couple of steps and you’re good to go.
- Nuxt automatically generates your routes with zero configuration.
- Preview mode when used as an SSG.
- Typescript support
- Active community constantly improving the framework
- Automagically skip Webpack build step when no code has been changed
- Simple static sites to large, complex server-side rendered applications
- Quickly and easily get a blog or documentation site up and running
- eCommerce site
- Admin dashboard application
- JS-heavy. It's easy to create huge JS bundle if you don't build your website carefully.
- Need to download content twice. First pre-rendered in HTML, then the same content in JSON.