Hands-on Nuxt.js Web Development
eBook - ePub

Hands-on Nuxt.js Web Development

Build universal and static-generated Vue.js applications using Nuxt.js

Lau Tiam Kok

Share book
  1. 698 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

Hands-on Nuxt.js Web Development

Build universal and static-generated Vue.js applications using Nuxt.js

Lau Tiam Kok

Book details
Book preview
Table of contents

About This Book

Learn Nuxt.js for building server-side rendered, static-generated, and production-ready Vue.js web applications with the help of practical examples

Key Features

  • Explore techniques for authentication, testing, and deployment to build your first complete Nuxt.js web app
  • Write cleaner, maintainable, and scalable isomorphic JavaScript web applications
  • Transform your Vue.js application into universal and static-generated web apps

Book Description

Nuxt.js is a progressive web framework built on top of Vue.js for server-side rendering (SSR). With Nuxt.js and Vue.js, building universal and static-generated applications from scratch is now easier than ever before.

This book starts with an introduction to Nuxt.js and its constituents as a universal SSR framework. You'll learn the fundamentals of Nuxt.js and find out how you can integrate it with the latest version of Vue.js. You'll then explore the Nuxt.js directory structure and set up your first Nuxt.js project using pages, views, routing, and Vue components. With the help of practical examples, you'll learn how to connect your Nuxt.js application with the backend API by exploring your Nuxt.js application's configuration, plugins, modules, middleware, and the Vuex store. The book shows you how you can turn your Nuxt.js application into a universal or static-generated application by working with REST and GraphQL APIs over HTTP requests. Finally, you'll get to grips with security techniques using authorization, package your Nuxt.js application for testing, and deploy it to production.

By the end of this web development book, you'll have developed a solid understanding of using Nuxt.js for your projects and be able to build secure, end-to-end tested, and scalable web applications with SSR, data handling, and SEO capabilities.

What you will learn

  • Integrate Nuxt.js with the latest version of Vue.js
  • Extend your Vue.js applications using Nuxt.js pages, components, routing, middleware, plugins, and modules
  • Create a basic real-time web application using Nuxt.js, Node.js, Koa.js and RethinkDB
  • Develop universal and static-generated web applications with Nuxt.js, headless CMS and GraphQL
  • Build Node.js and PHP APIs from scratch with Koa.js, PSRs, GraphQL, MongoDB and MySQL
  • Secure your Nuxt.js applications with the JWT authentication
  • Discover best practices for testing and deploying your Nuxt.js applications

Who this book is for

The book is for any JavaScript or full-stack developer who wants to build server-side rendered Vue.js apps. A basic understanding of the Vue.js framework will assist with understanding key concepts covered in the book.

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Hands-on Nuxt.js Web Development an online PDF/ePUB?
Yes, you can access Hands-on Nuxt.js Web Development by Lau Tiam Kok in PDF and/or ePUB format, as well as other popular books in Computer Science & Programming in JavaScript. We have over one million books available in our catalogue for you to explore.


Section 1: Your First Nuxt App
In this section, we will provide a short introduction to Nuxt, its features, its folder structures, and more. Then, we'll start building our first Nuxt app by following some simple steps and integrating Nuxt routing, configuration, Vue components, and more.
This section comprises the following chapters:
  • Chapter 1, Introducing Nuxt
  • Chapter 2, Getting Started with Nuxt
  • Chapter 3, Adding UI Frameworks
Introducing Nuxt
Welcome to your journey of Hands-on Nuxt.js Web Development. In this chapter, we will peer inside Nuxt to see what constitutes this framework. We will walk you through Nuxt's features and you will get to know the pros and cons of the different types of applications that Nuxt falls in line with. Last but not least, you will discover the great potential of using Nuxt as a universal SSR app, a static site generator, and a single-page app.
In this chapter, we will cover the following topics:
  • From Vue to Nuxt
  • Why Use Nuxt?
  • Types of applications
  • Nuxt as a universal SSR app
  • Nuxt as a static site generator
  • Nuxt as a single-page app
Let's get started!

From Vue to Nuxt

Nuxt is a higher-level Node.js web development framework for creating Vue apps that can be developed and deployed in two different modes: universal (SSR) or single-page application (SPA). Furthermore, you can deploy SSR and SPA in Nuxt as static-generated apps. Even though you can choose the SPA mode, the full power of Nuxt lies in its universal mode or server-side rendering (SSR) for building universal apps. A universal app is used to describe JavaScript code that can execute both on the client and the server-side. But if you wish to develop a classic (or standard/traditional) SPA, which executes on the client-side only, you may want to consider using vanilla Vue.
Note that an SPA mode Nuxt app is slightly different from a classic SPA. You will find out more about it later in this book and briefly in this chapter.
Nuxt is created on top of Vue, supercharged with some extra features such as asynchronous data, middleware, layouts, modules, and plugins that execute your app on the server-side first, and then on the client-side. This means the app generally renders quicker than the traditional server-side (or multiple-page) apps.
Nuxt is pre-installed with the following packages so that you don't have to install them, which you would do in a standard Vue app:
  • Vue (https://vuejs.org/)
  • Vue Router (https://router.vuejs.org/)
  • Vuex (https://vuex.vuejs.org/)
  • Vue Server Renderer (https://ssr.vuejs.org/)
  • Vue Meta (https://vue-meta.nuxtjs.org/)
On top of that, Nuxt uses webpack and Babel to compile and bundle your code with the following webpack loaders:
  • Vue Loader (https://vue-loader.vuejs.org/)
  • Babel Loader (https://webpack.js.org/loaders/babel-loader/)
In a nutshell, webpack is a module bundler that bundles all the scripts, styles, assets, and images in your JavaScript app, while Babel is a JavaScript compiler that compiles or transpiles the next-generation JavaScript (ES2015+) to browser-compatible JavaScript (ES5) so that you can run your code on current browsers.
For more information about webpack and Babel, please visit https://webpack.js.org/ and https://babeljs.io/, respectively.
webpack uses what they call loaders to preprocess your files when you import them via the JavaScript import statement or require method. You can write your loaders but you don't have to do so when compiling your code in Vue files since they have been created for you by the Babel community and Vue team. We'll discover the great features that come with Nuxt and those contributed by these loaders in the next section.

Why use Nuxt?

Frameworks such as Nuxt exist because of the shortcomings of the traditional SPA and the server-side rendering of multi-page applications (MPAs). We can regard Nuxt as a hybrid of server-side rendering MPA and traditional SPA. Hence, it is dubbed "universal" or "isomorphic". So, being able to do server-side rendering is the defining feature of Nuxt. In this section, we will walk you through other prominent features of Nuxt that will make your app development easy and fun. The first feature we'll look at allows you to write single-file Vue components by using a .vue extension in your files.

Writing single-file components

There are a few methods we can use to create a Vue component. A global Vue component is created by using Vue.component, as follows:
Vue.component('todo-item', {...})
On the other hand, a local Vue component can be created using a plain JavaScript object, as follows:
const TodoItem = {...}
These two methods are manageable and maintainable if you're using Vue for a small project, but it becomes difficult to manage for a big project when you have tons of components with different templates, styles, and JavaScript methods all at once.
Hence, single-file components come to the rescue, in which we only use one .vue file for each Vue component. If you need more than one component in your app, then just separate them into multiple .vue files. In each of them, you can write the template, script, and style that relate to that particular component only, as follows:
// pages/index.vue
<p>{{ message }}</p>

export default {
data () {
return { message: 'Hello World' }

<style scoped>
p {
font-size: 2em;
text-align: center;
Here, you can see how we have an HTML template that prints the message from the JavaScript script and the CSS style that describes the presentation of the template, all in one single .vue file. This makes your code more structured, readable, and organizable. Sweet, isn't it? This is only made possible by vue-loader and webpack. In Nuxt, we only write components in .vue files, regardless of whether they are components in the /components/, /pages/, or /layouts/ directory. We will explore this in more detail in Chapter 2, Getting Started with Nuxt. Now, we'll look at the Nuxt feature that allows you to write ES6 JavaScript out of the box.

Writing ES2015+

Nuxt compiles your ES6+ code out of the box without you having to worry about configuring and installing Babel in webpack. This means you can write ES6+ code straight away and your code will be compiled into JavaScript that can be run on older browsers. For example, you will see the following destructuring assignment syntax often when using an asyncData method:
// pages/about.vue
export default {
async asyncData ({ params, error }) {
The destructuring assignment syntax is used in the preceding code to unpack the properties from the Nuxt context into distinct variables that we can use for the logic inside the asyncData method.
For more information about the Nuxt context and ECMAScript 2015 features, please visit https://nuxtjs.org/api/context and https://babeljs.io/docs/en/learn/, respectively.
Writing ES6 in Nuxt is only made possible by babel-loader and webpack. There's more than just the destructuring assignment syntax that you can write in Nuxt, including the async function, the await operator, the arrow function, the import statement, and many more. What about the CSS preprocessor? If you write CSS styles with a popular CSS preprocessor such as Sass, Less, or Stylus, but if you are a Sass person and not a Less person, nor a Stylus person, can Nuxt support any of them? The short answer is yes. We'll find out the long answer to this question in the next section.

Writing CSS with a preprocessor

In Nuxt, you can choose your favorite CSS preprocessor to write the styles for your app, whether it is Sass, Less, or Stylus. They are already pre-configured for you in Nuxt. You can check out their configurations at https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js. So, you just need to install the preprocessor and its webpack loader in your Nuxt project. For example, if you want to use Less as your CSS preprocessor, just install the following dependencies in your Nuxt project:
$ npm i less --save-dev
$ npm i less-loader --save-dev
Then, you can start writing your Less code by setting the lang attribute to "...

Table of contents