Is it possible to compile Vue.js templates to static HTML and CSS files?

Question

Recently I\'ve fallen in love with Vue.js\'s single file components. It\'s so much nicer to have a component\'s template and styles close to each other, and I\'m finding I write

Answer 1

What you are looking for is Server Side rendering. I would suggest you to have a look at Nuxt.js.

From VueJS docs:

Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: Nuxt.js. Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.

It is super simple to get it started. If you use vue-cli:

$ vue init nuxt/starter 

It comes with all you normally need (Vuex, Router,..). Just keep in mind that it enforces some folder structure, that you have to follow.

Here is the list of commands that are included in the starter.

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

You will probably be mostly iterested in generate, as it

Build the application and generate every route as a HTML file (used for static hosting).

Also cool thing to note is that the project seems to be (at the time of writing this) under active development and we can look forward to more great features!