Vue.js Basics

Installation

Start by installing yarn from yarn website.

Quick and dirty

yarn global add vue-cli
vue init webpack-simple my-app
cd my-app
yarn install
yarn upgrade
yarn run dev

Normal Development

yarn global add vue-cli
vue init webpack my-app
cd my-app
yarn install
yarn upgrade
yarn run dev

When answering questions, choose standard installation (not airbnb) unless you like to fight with eslint and prefer to use semicolons everywhere.

---

Avoid Vue.js DOM templates

This advice comes from the Anthony Gore’s article: Why You Should Avoid Vue.js DOM Templates. The issue he writes about is that Vue.js DOM templates are not reliable in that they don’t always render the DOM code you expect.

In Short

• DOM templates are problematic as the DOM parser can mess with your markup. There’s also a potential for clashes with templating engines and incompatibility with server-side rendering.
• To minimize your DOM template, abstract your markup into components.
• To completely eliminate your DOM template you’ll need to mount your root-level component with a render function.

So, how can you architect a Vue.js app without a DOM template, or at least a small one?

Abstract markup to components

Your root instance can hold some state, but generally, you want any presentational logic and markup to be abstracted to components so it’s out of your DOM template.

Single-file components are the superior choice. If you’re unable to include a build step in your project and don’t like writing your templates as JavaScript strings (who does), you can try x-templates.

x-templates

With x-templates, your template is still defined in the page, but within a script tag, and will, therefore, avoid processing by the DOM parser. The script tag is marked with text/x-template and referenced by an id in your component definition.

Vue.component('my-component', {
  template: '#my-component'
}
<script type="text/x-template" id="my-component">
  <div>My component template</div>
  <NonStandardMarkupIsFineHere/>
</script>

Mount to an empty node with a render function

Abstracting markup into components hits a wall when you realize you still need to declare your root-level component in the DOM template.

<div id="app">
  <!-- We still have a DOM template :( -->
  <app></app>
</div>

If you want to totally eliminate your DOM template, you can mount your root-level component(s) with a render function.

Let’s say you have one all-encompassing component that declares the other components called App. App can be declared with a render function and mounted to an empty node since render functions will replace their mount element.

Autogenerated by vue-cli:

<div id="app"></div>

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Replace with:

<div id="app"></div>

new Vue({
  el: '#app',
  components: { App },
  render: (createElement) => createElement(App)
})

And with that, your app is free of any DOM templates!

If you can eliminate all string and DOM templates from your app you can use the smaller runtime-only build of Vue. This is an ideal project architecture and is the one you’ll see used in vue-cli templates.

---