Sunday, 20 August, 2017 UTC
Summary
In the last tweet on Twitter.com Nicholas C. Zakas wrote: “I recommend people use Vue.js these days. No license issues and I’ve just found it to be very well designed.” (source). In this post we focus on Vue.js and Nuxt on Total.js platform. Presented below informations about Nuxt comes from nuxtjs.org
Assumptions and Benefits our project:
- Design and build modular applications based on components in Vue.js / Vue.js 2
- Use server side rendering of Vue.js with Nuxt module with handle routing on total.js server
Nuxt.js is a framework for creating Universal Vue.js Applications.
Its main scope is UI rendering while abstracting away the client/server distribution.
Our goal is to create a framework flexible enough so that you can use it as a main project base or in addition to your current project based on Node.js.
Nuxt.js presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.
In addition, we also provide another deployment option called: nuxt generate. It will build a Static Generated Vue.js Application. We believe that option could be the next big step in the development of Web Applications with microservices.
As a framework, Nuxt.js comes with a lot of features to help you in your development between the client side and the server side such as Asynchronous Data, Middleware, Layouts, etc.
How it Works
Nuxt.js includes the following to create a rich web application development:
- Vue 2
- Vue-Router
- Vuex (included only when using the store option)
- Vue-Meta
A total of only 28kb min+gzip (31kb with vuex).
Under the hood we use Webpack with vue-loader and babel-loader to bundle, code-split and minify your code.
Features
- Write Vue Files
- Automatic Code Splitting
- Server-Side Rendering
- Powerful Routing System with Asynchronous Data
- Static File Serving
- ES6/ES7 Transpilation
- Bundling and minifying of your JS & CSS
- Managing Head Elements
- Hot reloading in Development
- Pre-processor: SASS, LESS, Stylus, etc
- Extending with Modular architecture
This schema shows what is called by nuxt.js when the server is called or when the user navigate through the app via
Our Vue.js Project with Nuxt on Total.js
<nuxt-link>:Structure of directories is following:
Expanded structure directories of total.js:
Expanded structure directories of Vue.js / Nuxt:
The most important:
In case of catalogs structure:
/vue – Vue.js with Nuxt directory contains project generated by command
$ vue init nuxt/starter <project-name>Remaining directories – Total.js
In case of configuration Total.js:
You have to define Vue.js directory in config file to block total.js process of compiling script – for this process will be responsible Nuxt
If You want use /public to storage transpiled vue files by nuxt then You have change “directory-public” to correct directory e.g. /public/
If You want use /public to storage transpiled vue files by nuxt then You have change “directory-public” to correct directory e.g. /public/
Thanks to settings configuration variable default-layout we have not use @{layout(”)} in index.html
Presented solution uses two ways of generating destination transpiled page:
1. Debug mode (debug.js) – server side rendering in DEBUG node bases on Nuxt module:
1. Debug mode (debug.js) – server side rendering in DEBUG node bases on Nuxt module:
2. Release mode (release.js) – destination solution is generated by Nuxt before running server and copied into /public directory. In controler of total.js is used only route path to static directory
To point destination build directory for nuxt generator we have to define it in config file
The last operation it is installation all necessary modules both in main project / and /vue directories
Start the server in debug mode with server side rendering
npm run devStart the server in release mode
npm run prodVisit http://localhost:8000
In console of Total.js server You can see generated html of vue.js by server side using nuxt module