Starting and building





My questions for you


  • Using Vue?
  • Want to use Vue?
  • Starting or building?


  • Web apps?
  • Mobile apps?
  • Desktop apps?


  • Using jQuery?
  • Using React?
  • Using Angular 1?
  • Using Angular 2?
  • Something else?

The plan

No Vue experience?

Starting a web app

Server-side rendered applications

Vue builds the HTML you serve to clients

Static websites

No server application

Single-page applications

Frontend separate from backend

Server applications

Vue enhances server templates

Static websites

  1. Nuxt

    • Rapid development

    • Don't be afraid to open an issue
  2. Netlify's prerendering
  3. Prerender at build with Webpack

Single-page applications

  1. Vue's webpack template

    • Feature-packed: top-class dev workflow!

    • Fully customizable

    • Read the template docs!

  2. Nuxt
    • You'll build apps The Nuxt Way
    • Great for simple, well-scoped applications

Server applications

  1. Built-in support

  2. Custom integration

Server-side rendered applications

  1. Nuxt
    • SSR out-of-the-box
    • Many edge cases handled for you
    • Again, very opinionated
  2. SSR docs
    • Can be difficult to learn
    • Demo app available

Starting a mobile app

Onsen UI


  • Battle-tested
  • Great documentation
  • Vue integration still young

Probably not as easy...


  • Proven to scale
  • Built for a single company
  • English docs lacking


  • Clear documentation
  • Very generalist (doesn't specialize in mobile)

Starting a desktop app


  • Again, doesn't specialize in desktop

Template: electron-vue

  • Easy to get started
  • Helps you learn Electron
  • Read the docs!

Build tools

Offers the best dev experience possible


Vastly improved docs over v1


Really understand Webpack with


Helps you do anything - really

CSS Modules

Dev tools

Vetur (for VS Code)

Syntax highlighting for .vue components


Snippets to speed up development

Auto completion for components

Catch runtime errors before they happen


Ensure consistent code across your app


Automatically fix many style violations


vue/recommended will enforce the official style guide

Companion libaries

Core offerings

Vue Router for... uh, routing


Vuex for complex state management

Simplifies testing Vue apps


Docs still in progress

import { shallow } from 'vue-test-utils'
import AppButton from '@components/app-button'

describe('Component: AppButton', () => {
  it('renders a button element with a title', () => {
    const c = shallow(AppButton, {
      propsData: {
        title: 'Hello!'

    const el = c.find('button')

Vue CLI     


Build as a dependency


Configure without ejecting


Docs, of course!

Style guide (UNRELEASED)

JS Fiddle (soon)


I'm @chrisvfritz everywhere

Starting and building Vue apps in 2017

By Chris Fritz

Starting and building Vue apps in 2017

  • 1,162
Loading comments...

More from Chris Fritz