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

  • I would like to voice my admiration for your kindness giving support to men and women that should have help on in this topic. Your personal commitment to passing the message all-around appears to be exceedingly functional and have continuously enabled individuals just like me to get to their pursuits. Your own invaluable guide implies this much to me and still more to my fellow workers. Thanks a ton; from each one of us..

  • I have to point out my gratitude for your kind-heartedness giving support to folks who actually need help on in this subject. Your real commitment to passing the solution throughout appears to be exceptionally productive and have surely allowed somebody just like me to arrive at their dreams. Your entire warm and friendly key points denotes a great deal a person like me and somewhat more to my peers. With thanks; from everyone of us..

  • First of all I want to say excellent blog! I had a quick question in which I’d like to ask if you don’t mind. I was curious to find out how you center yourself and clear your head prior to writing. I’ve had a tough time clearing my thoughts in getting my thoughts out. I do enjoy writing but it just seems like the first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any recommendations or hints? Appreciate it!.

  • Can I simply say what a relief to find someone who actually knows what theyre talking about on the internet. You undoubtedly know tips on how to deliver a problem to gentle and make it important. More folks need to learn this and understand this facet of the story. I cant believe youre not more well-liked because you positively have the gift..

  • I was very happy to seek out this web-site.I needed to thanks for your time for this excellent read!! I definitely having fun with each little bit of it and I have you bookmarked to take a look at new stuff you blog post..

  • Leave a Reply

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