DEV Community 👩‍💻👨‍💻


Posted on

Introduction to Nuxt.js

                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.
                               :+-      -*= .++: .=+.
                              -+:      =*-   .+*: .=+:

Hello, I'd like to introduce you to Nuxt.js, a Javascript framework that can be used to create powerful full stack applications very quickly assembled with a wide variety of options while maintaining best practices and scalability.

With a few easy steps, you can get a production ready app in minutes, and Nuxt.js will automatically configure your app with provided options to essentially any specification. Let's take a look.

First, make sure you are familiar with HTML and Javascript fundamentals, because Nuxt.js is built on top of Vue.js another Javascript framework. Vue.js was created to allow javascript markup to co-exist with html, and uses a component based architecture to load new or updated information to the screen dynamically.

Vue.js solves the same problems that React does for front-end development, but in very different ways which means they could have different use cases in a variety of scenarios. It's ultimately up to you to decide which one is better suited to your needs, so hopefully this article will explain some pros and cons that Vue.js/Nuxt.js will have for your consideration, especially if you are already familiar with React.

To install, you can use NPM or Yarn, which will install the Nuxt.js package to your project folder.

npx -v 
check version and/or install npm
npx create-nuxt-app record-shop
create your project

When you run the create command, the console will prompt you with options for your app build specifications. You can choose a front end UI framework, server-side framework, middleware, routing, etc. Or you can click through and start from scratch, because Vue.js/Nuxt.js are designed to be open ended and versatile to suite any project. This trait also allows Vue.js apps to be integrated into an existing project with east.

For my demo, I chose the following settings:

? Project name Record Shop
? Project description
? Author name hartsean
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Bulma
? Choose custom server framework Fastify

Once you've chosen the settings the app will install. Once the app in installed type:

cd record-shop
cd into project directory
npm run dev
Start Development Servers

Keep in mind that Vue is meant to be lightweight and un-configured for a reason, and that is to allow the developer complete control on deciding the structure and functionality of every asset of the application. For beginners or if you are seeking a more streamlined development process(Vue.js can be hard to set up from scratch) Nuxt.js fills that gap by optimizing Vue.js's native speed using pre-rendered html, and code splitting that loads only the needed javascript.

Nuxt.js is indexed by search, so will perform better in search engine's than a standard Vue.js build. It comes pre configured with Vue Router and Vue-meta, and Vuex, which are not included by default with Vue.

Vue also has no standard file structure, so Nuxt.js provides us with one as well. For routing, Nuxt.js gives you a pages folder, that will automatically set up routes when you place a single component file within it. Let's see how our build is doing in the console.

ℹ Preparing project for development                                   18:59:17
ℹ Initial build may take a while                                      18:59:17
✔ Builder initialized                                                 18:59:17
✔ Nuxt files generated                                                18:59:17

✔ Client
  Compiled successfully in 9.16s

✔ Server
  Compiled successfully in 9.49s

ℹ Waiting for file changes                                            18:59:28

 READY  Server listening on http://localhost:3000                     18:59:28


The app was generated and immediately available for development on my localhost. Time to add some code!

Top comments (1)

sunitk profile image
Sunit Katkar

Please do continue ...

Take a look at this:


Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠