Create a Nuxt app in Just a Few Minutes With Create Nuxt App
Create a Nuxt app in Just a Few Minutes With Create Nuxt App
Nuxt is a framework built for creating Vue applications. These Vue applications can be a single page application, a static generated application or a universal application. Nuxt presets all the configuration needed to make developing a Vue Application more enjoyable.
Nuxt is made for Vue applications, it is an even easier way to build Vue apps, as Vue is pretty easy to use already
Nuxt helps you build Server Side Rendered applications very seamlessly. This is because most of the complicated configurations associated with middleware, routing, state management and asynchronous data are baked into it. Nuxt is to Vue what Next is to React.
Just like create-react-app, the team at Nuxt has shipped a pretty amazing CLI feature that spins up a new Nuxt application after a couple of prompts and presets. You can choose exactly the environment you want with this new tool, it is very smooth and intuitive.
Creating a Nuxt project
Create-Nuxt-App requires that you have Node Package Manager version 5.2.0 or above installed on your machine. It ships with npx which you can use to run commands. If you do have this, then run the command below to create a new nuxt project:
$ npx create-nuxt-app hello-world
Or with yarn:
yarn create nuxt-app hello-world
Where hello-world is the name of the project (it can be any name you choose) It will ask you some questions about:
- name of project
macs-MacBook-Pro:~ mac$ sudo npx create-nuxt-app hello-world Password: npx: installed 402 in 58.637s > Generating Nuxt.js project in /Users/mac/hello-world ? Project name (hello-world)
- project description
? Project description (My priceless Nuxt.js project) a simple hello world application
- choose between integrated server-side frameworks
? Use a custom server framework (Use arrow keys) ❯ none express koa adonis hapi feathers micro
- choose a UI framework
? Use a custom UI framework (Use arrow keys) ❯ none bootstrap vuetify bulma tailwind element-ui buefy
- choose the mode you want Nuxt to be rendered
? Choose rendering mode (Use arrow keys) ❯ Universal Single Page App
- choose to use axios for making HTTP requests
? Use axios module (Use arrow keys) ❯ no yes
- choose to use eslint in the project on code save
? Use eslint (Use arrow keys) ❯ no yes
- choose to use prettier on code save
? Use prettier (Use arrow keys) ❯ no yes
After answering these, it will install all the dependencies so the next step is to launch the project with:
$ npm run dev
You can now open a browser and see the application now running on http://localhost:3000.
Nuxt will listen for file changes inside the
pages directory, so there is no need to restart the application when adding new pages.
New and Shiny Features of Nuxt 2.0
Now we have seen create-nuxt-app, let us also take a look at the other shiny features that also shipped with 2.0
The new Nuxt version 2 shipped with the latest Webpack version 4. Webpack 4 has been seriously adopted by industry giants because of the stunning speed of boot-up and re-compilation. Asides the speed, Webpack introduced module types and also comes with .mjs and web assembly support.
- The experimental option
build.dllwas removed because it was not stable and also considering the speed of Webpack.
- Default dev tool for client bundle is the Webpack default
evalwhich is the fastest option.
- Scope Hoisting is enabled by default.
Nuxt-start and Nuxt-legacy
Nuxt-start was introduced in this new version, used to start a Nuxt application in production mode. Then the Nuxt-legacy was added to support the legacy build of Nuxt for Node.
Although the vendors chunk still exists in this new version, it would now be automatically handled to improve efficiency. From this new release, CommonsChunkPlugin would not be used anymore so you do not have to explicitly define vendors inside your project. Nuxt would automatically add every core package into a hinted cache group, these packages can be Vue, Vue-Router and the likes. This would make the splitting work of Webpack even easier.
Full control over chunk splitting
Previously Nuxt would opt for code splitting by default. While Nuxt tries to provide the most efficient splitting possible out of the box, you can now take complete control over it using
build.splitChunks option and optionally disable async chunks per route.
In this new release, ES Modules are now supported everywhere. You can now use the export and import syntax inside your nuxt.config.js file, in serverMiddleware and modules thanks to the std/esm a fast, production ready, zero-dependency package to enable ES modules in Node version 6 and above.
New CLI Improvements
A couple of important improvements in the CLI tool shipped with this new release. Initially, after running nuxt dev you would recall there is always a little time lapse before your app is served on localhost. This is usually due to the fact that Webpack runs two times, once for the client side and then for the server side bundle. Now we have the WebpackBar to help make this all easy and now builds run in parallel.
Developers have also asked for Nuxt support for testing and continuous integration environments and now it is here! Nuxt version 2 would now automatically detect CI and Test environments and will switch to a special mode called
minimalCLI with less verbose messages. Finally, all debug messages are now hidden by default, only now showing smarter and better messages for both builder and generator.
Enter postcss-preset-env; Upgrade css-loader
In this new release, cssnext is now deprecated, now you would start to use postcss-preset-env instead of postcss-cssnext. Also, css-loader has been upgraded to now make us use ~assets instead of ~/assets for alias in css data types.
As we already know, Nuxt is perfect for building Vue single page applications. One really great part of single page applications can be the page loading indicator. In this new release this indicator has been redesigned to adaptively start showing in the DOM after about 2 seconds. Aria tags were also added to help screen readers detect splash screens. Support for
options.render.bundleRenderer.shouldPreload for single page application mode have also been added in this release.
context.isClientwere removed, use
build.extend()was removed, use
- Tappable hooks
nuxt.plugin()in modules were removed use the new hooks system
- Callbacks for modules was removed, use
asyncor return a
🛠 Tips for Migration
- For Webpack, you do not need to change a single line of code in your project. Everything will be automatically migrated as soon as you upgrade to Nuxt 2.
- You can remove
nuxt.config.jsIf you have some in your project safely remove them. If you are a module author, you can keep
this.addVendor()for legacy support.
- Stay with defaults. Benchmark your real projects and tailor options with care according to your needs.
⚠️ Breaking Changes
shouldPrefetchis now disabled by default. Due to reports of unwanted page chunk prefetching especially on medium sized projects. Also, all unnecessary resource hints are disabled by default on non-production mode for easier debugging.
- Manifest chunk is not split by default by Webpack to reduce async requests and is moved into the main chunk. You can enable it by using
- For production builds, we no longer use file names as a part of chunk names (
[hash.js]) this helps accidentally leak of you project internals. You can force enable names back using
- Nuxt no longer splits layout chunks by default. They will be loaded alongside the main entry-point just like Nuxt core, Plugins, Middleware and Store. You can enable layout splitting using
We have seen the new Create-Nuxt-App and other cool new features of the Nuxt version 2. You can let me know in the comment section what your favourite features are and if you have use the new Create-Nuxt-App for your Nuxt project. Happy Coding