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

  • Leave a Reply

    Your email address will not be published. Required fields are marked *