Vue.js and Nuxt on Total.js platform

In the last tweet on Twitter.com  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

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

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 

What is Nuxt.js?

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

Vue with Webpack and Babel

Nuxt.js includes the following to create a rich web application development:

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

Schema

This schema shows what is called by nuxt.js when the server is called or when the user navigate through the app via <nuxt-link>:

nuxt-schema

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>

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

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:

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 dev

Start the server in release mode

npm run prod

Visit http://localhost:8000

In console of Total.js server You can see generated html of vue.js by server side using nuxt module

August 20th, 2017

Leave a Reply

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