Menu
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?
928
SSR is only one advantage for me when using Nuxt.
There are still a few things left when you use Nuxt in SPA mode:
pages folderasyncData or fetch methodsIn general it provides a more structured way of developing Vue.js applications.
60
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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
