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
Create a Nuxt app in Just a Few Minutes With Create Nuxt App

Introduction: Nuxt

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.

Create-Nuxt-App

This is image title

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

Webpack 4

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.

Other changes:

  • The experimental option build.dll was removed because it was not stable and also considering the speed of Webpack.
  • Default dev tool for client bundle is the Webpack default eval which 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.

Vendors Leaving…

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.

ESM Support

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.

SPA Improvements

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.shouldPrefetchand options.render.bundleRenderer.shouldPreload for single page application mode have also been added in this release.

🛑 Deprecations

  • context.isServer and context.isClient were removed, use process.clientand process.server
  • options.dev in build.extend() was removed, use options.isDev
  • Tappable hooks nuxt.plugin() in modules were removed use the new hooks system
  • Callbacks for modules was removed, use async or return a Promise

🛠 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 vendors from nuxt.config.js If 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

  1. shouldPrefetch is 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.
  2. 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 build.optimization.runtimeChunk: true
  3. For production builds, we no longer use file names as a part of chunk names ( /_nuxt/pages/foo/bar.[hash].jsbecomes[hash.js]) this helps accidentally leak of you project internals. You can force enable names back using build.optimization.splitChunks.name: true.
  4. 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 build.splitChunks.layouts: true

Conclusion

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

Suggest:

☞ Nuxt.js - Practical NuxtJS

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

☞ Learn Vue.js from scratch 2018

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners