Tuesday, 29 August, 2017 UTC
Summary
In this post we will focus on Vue 2, Nuxt, Vue-Router, Vuetify on Total.js platform.
Vuetify
Vuetify (Material Component Framework) it is the most known library for Vue. Features of Vuetify are listed on vuetifyjs.com:
- Vuetify comes ready to go with 5 pre-made vue-cli templates. From simple html to full-blown SSR, you are ready to go in minutes.
- Each and every available layout from the Material design spec is at your disposal. Create unique and flexible user interfaces that fit the scope of any project.
- Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution for any application.
Assumptions and Benefits our project:
- Design and build modular applications based on components in Vue.js 2, Vue-Router and Vuetify
- Use server side rendering of Vue.js with Nuxt module with handle routing on total.js server
- 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
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>Nuxt config file:
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
Very Important!!! Due to compilation problems in stylus-loader we have to perform one necessary change. I’d like to solve this issue in much more friendly way without modification in npm module, but for now it’s one existsig solution to avoid this problem. Fix in stylus-loader module in file patchcache.js function normalizePaths(paths) to destination source code:
Presented solution uses two ways of generating destination transpiled page:
1. Debug mode (debug.js) – server side rendering in DEBUG mode bases on Nuxt module:
1. Debug mode (debug.js) – server side rendering in DEBUG mode 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 nuxt.config.js 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
Demo is on https://vue2.jrbsystem.com/
In console of Total.js server You can see generated html of vue.js by server side using nuxt module
Carusel and visible left Menu
Carusel and hidden left Menu