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?
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.
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.
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/
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
Related
I'm not sure when to use what.
with nuxt build you get two directories(client & server) that means you are actually deploying node.js server(i.e. express, right?)
with nuxt generate you get .html
It seems both ways you can have good SEO which nuxt aims at. And to me, nuxt generate option seems more consize since it doesn't envolve server.
What am I missing here? Why should I use nuxt build and get server code mixed up?
This is shown in the docs here:
https://nuxtjs.org/docs/get-started/commands/
nuxt build: Build your application with webpack and minify the JS & CSS (for production).
nuxt generate: Build the application and generate every route as a HTML file (used for static hosting).
Josh
Just a quick question
Any user can see and access the data we use in the Vue model via Vue Devtool.
Imagine you have an employee list saved in Vue Obj and the user can see all other employees' emails etc..
Is there a way to hide data from the user browser devtool? Make sure devtool only shows development mode.
Thanks for the help.
When you are building a SPA project using vue CLI, the vue dev tools is disabled in production through webpack build by default but when you use vue in a HTML page like a MVC project which vue is added to some of its .cshtml files it isn't disabled, and you might need to configure it manually to make it disable.
you can do this by adding the line below before making your vue instance, I mean before new Vue({ ... }), add:
Vue.config.devtools = false
(worked in a MVC project)
and here is an article for this:
disable vue devtools in production
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I have a #vue-cli generated project that I need to port over to a simple "three file" setup (ie only index.html, index.js, and index.css) so I can showcase portions of it on Codepen.
However, I'm having a hard time disentangling the "cli" structure of the app. The main issue seems to be two-fold:
CLI is wired to use single-file components whereas Codepen expects everything to be included "in-line" within the js file
Webpack is working its magic in the background to compile everything together based on CLI's single-file component structure, etc.
For example, within the main.js file, a CLI app imports various Vue related modules, then initializes the Vue instance with
new Vue({
render: h => h(App)
}).$mount('#app')
This, of course, corresponds with the content of the index.html
...
<div id="app"></div>
Right now I'm manually copying and pasting things over into Codepen, but that dev environment is just atrocious for any type of serious editing and manipulation... So that's why I'd like to build it out and test stuff OUTSIDE of Codepen, then paste it all in once I'm happy with the results.
I've tried pulling all of the component code into main.js using the standard Vue.component('<name>', { <options> }) syntax, but it's not playing well...
Any ideas? Thanks for the help, sorry for such a broad question!
PS: OR! Maybe I'm going about it the wrong way. Rather than try to "de-CLI" a CLI app structure, how could I create a simple "three-file" Vue app with the comforts of things like npm run serve with hot-loading to see things in action on the page?
I want to create a website with two separate applications which share some components and store.
index is the public application where I want to use nuxt.js to have SSR.
admin should be a classic SPA where SSR is not needed.
My first idea was to create a multi-page vue application as described in the vue-cli docs at https://cli.vuejs.org/config/#pages
However I'm unsure if this feature fits my needs and if it's possible/advisable to have a nuxt.js app alongside a bare vue.js application, because nuxt.js has a different project structure.
Is there any way to configure nuxt.js so it fits in the default project structure of vue or to configure vue to use the nuxt.js folder structure?
Create multiple Vue Applications with (some) shared source-files (components/store/mixins/etc)
It is easily possible to share resources across multiple Vue-Apps simply by importing the respective resource everywhere you would like to use it, e.g.:
// in /components/MyComponent.vue
<template>
<div>I'm a shared component</div>
<template>
// in /user-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
// in /admin-app/entry.js
import MyComponent from '../components/MyComponent';
Vue.component('MyComponent', MyComponent);
new Vue({...})
Where it becomes a little bit complicated
To actually create the seperate apps you will have to use some built-process. By far the most common tool to build Vue apps (and the one used by VueCLI & Nuxt) is WebPack.
To create multiple apps with WebPack you need to do one of two things:
simply use the integreated build-processes of the VueCLI and Nuxt separately. It will work out of the box.
create your own WebPack configuration & the EntryPoint of every single app in WebPack's configuration. NOTE: It is not trivial to use your own build-process for Nuxt, if you really want to use Nuxt I advice you against it. Run with two seperate build-processes instead.
The WebPack configuration itself is a JavaScript Object. The relevant key to declare your EntryPoints is sensibly called entry. Here you specify the name of your EntryPoint and the corresponding path (the path to the entry-file).
The 'Pages' feature of the VueCLI uses this under the hood. However, I believe it is very well worth it to learn how to use WebPack yourself. It is not that complex and will significantly benefit most or all of your JavaScript projects.
A basic example configuration could look like this:
// in webpack.config.js
module.exports = {
mode: 'development',
entry: {
admin: path.resolve(__dirname, './admin-app.js'),
user path.resolve(__dirname, './user-app.js'),
},
// other config
}
WebPack is very well documented: https://webpack.js.org/concepts/