Learn about some new features in Nuxt 2.0
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.
Tip: Use Bit to share and manage reusable components across projects, to build faster as a team. You can instantly share components between your projects, develop them anywhere, and sync changes to source code and dependencies. Here’s an example of MUI components with Bit.
animation components with bit: develop, reuse, sync changes
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:
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 (My priceless Nuxt.js project) a simple hello world application
? Use a custom server framework (Use arrow keys) ❯ none express koa adonis hapi feathers micro
? Use a custom UI framework (Use arrow keys) ❯ none bootstrap vuetify bulma tailwind element-ui buefy
? Choose rendering mode (Use arrow keys) ❯ Universal Single Page App
? Use axios module (Use arrow keys) ❯ no yes
? Use eslint (Use arrow keys) ❯ no yes
? 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.
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.
build.dllwas removed because it was not stable and also considering the speed of Webpack.
evalwhich is the fastest option.
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.
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.
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.
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
nuxt.plugin()in modules were removed use the new hooks system
asyncor return a
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.
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.
[hash.js]) this helps accidentally leak of you project internals. You can force enable names back 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
Originally published on https://blog.bitsrc.io
We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.
A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.