Differences of 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'

Question

I write a simple Nuxtjs project. Based on what I learned from Nuxtjs documents and my experience while testing it, I could not understand the difference between 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'

For example in the following page:

// pages/index.vue

<template>
    <div class="userip">{{userip}}</div>
</template>

<script>
    export default {
        data() {
           return {
               userip: 'in process ...'
           }
        },

        async asyncData() {
            let res = await fetch("https://api6.ipify.org?format=json")
            .then(response => response.json());

            return {userip: res.ip}
        }
    }
</script>

if I run the following command:

cmd: nuxt generate

while Nuxtjs is configured in universal mode, it gives me pre-rendered files that also has SPA functionalities on the user's browser. For example, the file after the build is like the following:

// dist/index.html

<body>
  ...
    <div class="userip">14.182.108.22</div>
  ...
</body>

and when I run

cmd: nuxt start

or

cmd: nuxt dev

without generating prerendered files, then it makes a real SSR which gets rendered on every request. And now if I run the following:

cmd: nuxt generate

while in the SPA mode of Nuxtjs, it gives me some unrendered SPA files (like building the Vuejs project without even using Nuxtjs). The following is an example output:

// dist/index.html

<body>
  ...
    <div id="__nuxt"><style>#nuxt-loading { ... } ...</style></div>
  ...
</body>

which even doesn't contain components rendered inside.

And in live mode (without generating prerendered files),

cmd: nuxt start

or

cmd: nuxt dev

which serves unrendered files to the client.

So, what is the difference between a Vuejs project which uses the SPA mode of Nuxtjs and one that does not use Nuxtjs at all?

score 8 · Answer 1 · answered Jan 19 '20 at 13:36

SSR is only one advantage for me when using Nuxt.

There are still a few things left when you use Nuxt in SPA mode:

You don't have to care about routing just create components in pages folder
Easier way of loading data into your components with asyncData or fetch methods
Easy setup of Vuex including automatically namespaced store modules

In general it provides a more structured way of developing Vue.js applications.

score 3 · Answer 2 · answered Jul 06 '20 at 10:35

Nuxt js is going to have basic advantages over vuejs as it is a framework which is build using vuejs where Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications only.

Nuxt.js is a frontend framework built upon Vue.js that offers great development features such as server side rendering, automatically generated routes, improved meta tags managing and SEO improvement.

Basic difference can be:

Nuxt js created routes for you by itself, just create component inside the pages folder and you're done. This automation of declaring routes can be done in vuejs as well but definitely you are required to code for that.
Structured Project: One of the biggest drawback (you can say that), of vuejs is that, it is not having any standardized folder structure which nuxtjs defines.
Easily set up transitions between your routes (declare the css in the main.css file present in the assets folder).
Easy setup of Vuex.

zevstravitz · Answer 3 · 2020-04-14T15:29:30.447

Nuxt can be used univeral apps (SSR), static generated apps, and single-page apps.

As mentioned above, Nuxt comes built in with all sorts of benefits, such as Vuex, Vue Meta, and Vue Router. It also scaffolds your file structure and allows you to easily configure your project with modules and plugins in the nuxt config file. For SPA's, there's also the option of using Nuxt as a middleware.

https://nuxtjs.org/guide/

hosein azimi · Answer 4 · 2020-09-19T08:33:10.060

In fact, Nuxt js is good for SSR. Vuejs does not have SSR capability and is difficult to implement. SSR means Server Side Rendering. When it uses ssr, your requests are called to the server and compiled and finally sent to the page!

We may not be able to understand it exactly. But to test and understand this, first use data () in your pages, and after running the project, take a view source on your site and it will be noticed that your site has only loaded the content of the header and footer and the content of your pages is hidden. If you create a project this way, it is better to do the same Vuejs !!! The correct way is to use asyncData Or Fetch on the pages to show you the full meaning of SSR. After using asyncData, compare your output as before !! Also, if you want to use asyncData, the project type must be

Universal

Good luck

Differences of 'Nuxtjs SPA mode' and 'Vuejs without Nuxtjs'

4 Answers4