DEV Community

Cover image for Introduction to Nuxt.js
Michellebuchiokonicha
Michellebuchiokonicha

Posted on • Edited on

Introduction to Nuxt.js

You might have heard of nuxt and be wondering what it is.
Nuxt.js is a framework of vue.js which is a JavaScript framework. So basically, nuxt.js is a framework of a framework.
Make sense?

Although more versions have been released to improve useability but nuxt.js remains a framework that offers server-side rendering It is an open source framework that improves performance and accessibility. It is a frontend framework and offers better SEO improvement with its server-side rendering feature. It provides faster development than Vue with an auto-generic route. It helps create a statistically generated website for applications and handles a bunch of boilerplate work for standard vue.js apps.

Differences between Nuxt.js and Vue.js

The first thing is that nuxt is a framework of Vue.js hence a framework of a JavaScript framework while vue.js is a framework of JavaScript.
Nuxt.js helps building vue.js applications faster and easier as it provides a lot of new features that are not present in vue.js
Vue.js is known for its high scalability, ready to use conventions, resource optimization and a client-side rendering framework while Nuxt.js is known to be a server-side rendering framework, ability to build a single page app(SPA), robust routing system, static file serving, minifying and bundling of CSS and js, pre-processors: Sass, Less, Stylus, and more. It is also known for its ability to auto-code split, to write Vue files and also for its modular architecture extension.
Nuxt.js implements convention and configuration while Vue does not.
Nuxt.js handles routing and store config through pre-configured setups of Vue-router and vuex, with auto-generated routes based on your .vue file structure. It also provides some clever dynamic-url conventions.

Getting Started with Nuxt.js

To get started, make sure you have the node package installed. Check the version of your yarn or npm to be sure
Next, create your new nuxt.js application.

yarn create nuxt-app

A few questions will pop out like the name of your project, Nuxt options, UI framework, Typescript, linter, testing framework and so on. You can read through the create-nuxt-app documentation to find out more about these options.
After answering all this questions, go to your project folder and launch.’
Now, cd into your project
Then yarn dev.
You can view your project on localhost:3000

After this, create your package.json folder if it isn’t there already.
Then install nuxt.
yarn add nuxt
Then proceed to your folder.

You could start with very small projects and also, read through the nuxt.js documentation as there are available tutorials for you to try.
Nuxt.js is an interesting framework and works to improve your code experience.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/

Top comments (0)