Total.js: Vue2, Vuetify, Vue-Router on Total.js Platform

 

 In this post we will focus on Vue 2, NuxtVue-RouterVuetify on Total.js platform.

Demo is on https://vue.jrbsystem.com/

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 

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

Our Vue.js Project with Nuxt on Total.js

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/

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:

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 dev

Start the server in release mode

npm run prod

Visit http://localhost:8000

Demo is on https://vue.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

August 28th, 2017

  • I just wanted to develop a quick remark to express gratitude to you for these stunning information you are giving on this site. My considerable internet lookup has at the end of the day been recognized with beneficial tips to write about with my co-workers. I ‘d admit that most of us website visitors are very blessed to live in a useful website with very many outstanding individuals with helpful solutions. I feel quite fortunate to have seen your weblog and look forward to many more fabulous moments reading here. Thanks a lot once again for all the details..

  • I want to show my affection for your kindness for men and women who have the need for assistance with in this subject. Your very own dedication to passing the solution all over had become definitely powerful and have surely made men and women like me to realize their pursuits. Your amazing informative publication entails a great deal to me and even more to my fellow workers. Thank you; from all of us..