When getting started with developing new applications, developers can often spend a lot of time agonising over which framework is going to be the best choice for their needs. There are a number of points to consider like which Frontend framework to consider .i.e. Vue, React, Angular, Meteor etc. and even once you've decided that, then comes the added complication which Framework will you use on top your framework.
In this tutorial, we going to walk through some of the basic steps we went through in starting to create out server-side rendered application using NuxtJS, how we configured our development environment and deploy our new application to our Netlify hosting.
Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt’s goal is to make web development powerful and performant with great developer experience in mind
At it core NuxtJS enables developers to create three types of applications
Static Generated website
Static generated applications do not require API requests to fetch the contents of the pages, i.e. the contents are already included in the HTML file. An example of a static site is a portfolio website or landing pages for for lead generation.
Single Page Application
Server Side Rendered Applications (SSR)
Server-Side Rendering is a technique used to fetch and display client-side data on the server to send a fully rendered page to the client. This is a good approach to get good SEO for your application.
Nuxt helps developers to overcome common problems that occur when developing traditional Single Page Applications (SPA) and Server Side Rendering (SSR) Multi Page Applications (MPA). Nuxt is a hybrid framework to aid developers in developing both these types of applications in s single framework, commonly referred to as Universal or Isomorphic.
There are both advantage and disadvantages to both traditional server side rendered applications and Single Page applications. Nuxt helps to leverage all the benefits of both while trying to eliminate the unwanted side effects.
Using Universal Server-Side Rendering (USSR) your app will first pre-load on the server side, pre-render the pages and send the rendered HTML to the browser before switching to the client-side operation for the rest of the application's life span. Developing USSR apps from scratch is tedious and complicated because it requires a lot of configuration and plumbing code even before the actual development process can begin on the apps functionality.
The aim of Nuxt is to eliminate all this grunt work, by providing all the preset configuration and plumbing needed for you to create Vue USSR apps easily.
The ability simply and quickly develop Universal Server Side Rendering is the defining feature of Nuxt, which helps to eliminate the disadvantages, is the defining feature of Nuxt.
The best way to create a nuxt application is to make use of the NPM package runner (
npx) a tool intended
to help using packages from the npm registry — a similar experience to installing and manage dependencies hosted on
the registry, npx makes it easy to use CLI tools and other executables hosted on the registry.
npx has automatically been shipped with npm since version 5.2.0., so there should be no installation required. To
check if you have
npx installed you can use
npx --version which should respond with the version number. If
not installed you can install it as follows
npm install -g npx
We can now proceed to creating our nuxt application using the
# use create0nuxt-app and provide a section of your application npx create-nuxt-app geekiam-nuxt-tutorial
This will initiate a wizard process which will ask several questions regarding the type of application you would like to create. For the purpose of this tutorial, we will install axios, linting and Prettier configurations to create a Server Side Rendered application.
Once the wizard has completed, we can then change into the project directory created.
We can now run the following command in our terminal:
cd geekiam-nuxt-tutorial npm run dev
We have created our initial Nuxt Application and have it running. We now proceed to the next tutorial to understand nuxt project structure