Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Hands-on Nuxt.js Web Development

You're reading from   Hands-on Nuxt.js Web Development Build universal and static-generated Vue.js applications using Nuxt.js

Arrow left icon
Product type Paperback
Published in Aug 2020
Publisher Packt
ISBN-13 9781789952698
Length 698 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
LAU THIAM KOK LAU THIAM KOK
Author Profile Icon LAU THIAM KOK
LAU THIAM KOK
Lau Tiam Kok Kok Lau Lau Tiam Kok Kok Lau
Author Profile Icon Lau Tiam Kok Kok Lau
Lau Tiam Kok Kok Lau
Arrow right icon
View More author details
Toc

Table of Contents (26) Chapters Close

Preface 1. Section 1: Your First Nuxt App
2. Introducing Nuxt FREE CHAPTER 3. Getting Started with Nuxt 4. Adding UI Frameworks 5. Section 2: View, Routing, Components, Plugins, and Modules
6. Adding Views, Routes, and Transitions 7. Adding Vue Components 8. Writing Plugins and Modules 9. Adding Vue Forms 10. Section 3: Server-Side Development and Data Management
11. Adding a Server-Side Framework 12. Adding a Server-Side Database 13. Adding a Vuex Store 14. Section 4: Middleware and Security
15. Writing Route Middlewares and Server Middlewares 16. Creating User Logins and API Authentication 17. Section 5: Testing and Deployment
18. Writing End-to-End Tests 19. Using Linters, Formatters, and Deployment Commands 20. Section 6: The Further Fields
21. Creating an SPA with Nuxt 22. Creating a Framework-Agnostic PHP API for Nuxt 23. Creating a Real-Time App with Nuxt 24. Creating a Nuxt App with a CMS and GraphQL 25. Other Books You May Enjoy

Nuxt as a single-page app

Nuxt is well-suited for developing single-page apps if you have any reason that prevents you from using Nuxt as a server-side rendering app. As we mentioned at the beginning of this chapter, Nuxt comes with two modes for developing your app: universal and spa. This means you just have to specify spa in the mode property in your project configuration, which we'll explore in more detail in the next chapter.

So, you might be thinking that if we can use Nuxt for developing a SPA, then why bother with Vue anymore? In fact, the SPA you can develop from Nuxt is slightly different from the SPA from Vue. The SPA you build from Vue is a traditional SPA, while the SPA from Nuxt is a "static" SPA (let's refer to it as Nuxt SPA) – your app pages are pre-rendered at build time. This means deploying a Nuxt SPA is technically the same as statically generating a Nuxt universal SSR app – both require the same Nuxt command: nuxt generate.

This can be confusing and you may want to ask what is the difference between the static-generated SSR app and the static-generated SPA? The difference is very obvious – the static-generated SPA has no page content compared to the static-generated SSR app. The static-generated SPA is pre-rendered with your app pages and "empty" HTML, just like the traditional SPA – devoid of page content. This is confusing, but rest assured, we will figure all this out in the upcoming chapters of this book. In particular, you learn about the trade-offs of developing SPAs in Nuxt and how to overcome them.

You'll learn how to develop a Nuxt SPA and generate a static Nuxt SPA with a remote API in Chapter 15, Creating an SPA with Nuxt.

You have been reading a chapter from
Hands-on Nuxt.js Web Development
Published in: Aug 2020
Publisher: Packt
ISBN-13: 9781789952698
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image