Vue.js

Getting started with Vue.

This will show you how to setup Vue and use the recommended Single File Components.

Install Dependencies

In the root of your project directory run:

yarn add vue
yarn add --dev vue-brunch vueify postcss-brunch babel-plugin-transform-runtime

Expose Vue Globally

In brunch-config.js add this to the npm section:

npm: {
  globals: {
    Vue: 'vue/dist/vue.common.js'
  }
}

This imports the Standalone Version as opposed to the runtime only. We need the standalone version to get the compiler and template options.

Ensure Templates Option is present in brunch-config

In brunch-config.js ensure the templates option in files is set to this:

files: {
  javascripts: {
   'app.js': /^app\/frontend\/js\//,
   'vendor.js': /^(?!app\/frontend\/js)/
  }
  ...
  // Make sure templates is there. New installs of Breakfast
  // should have this by default.
  templates: {
    joinTo: 'app.js'
  }
}

Create a Component

Create a components folder - app/frontend/js/components. As an example, create a file in the components folder called Hello.vue and add the following code in:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello from Vue!"
      }
    }
  }
</script>

Require the Component

Assuming in your layout there is a div with an id of root, in app/frontend/js/app.js add the following:

import Hello from './components/Hello';

// Import this if you wish to use CSS in your .vue files.
// See section below for more information.
import "vueify/lib/insert-css";

let App = {
  init() {
    $(document).on("turbolinks:load", () => {
      new Vue({
        el: '#root',
        components: {
          'hello': Hello
        }
      })
    });
  }
}

Render Components

In your view render your components:

<div id="root">
  <hello></hello>
</div>

CSS in .vue files

Vue single file components also support adding CSS. Here are some examples of how to use CSS (or SCSS, Stylus, etc.).

// Add a style tag anywhere in the .vue file.

<style>
  h1 {
    color: #000;
  }
</style>



// To use SCSS, add the lang option.
// Imports and other SCSS features work as you would expect.

<style lang="scss">
  @import "../../css/variables"

  .header {
    h1 {
      color: $headings-color;
    }
  }
</style>



// PostCSS also supports a scoped option.
// This will scope the CSS within the component.

<style scoped>
  // Without the scoped option, all H1 elements on
  // the page would be affected.   By using scoped
  // only H1's in this component will be styled.
  h1 {
    color: #000;
  }
</style>

With Turbolinks

If you are using Turbolinks then we have to tear down the root component before rendering a new page.

Modify app.js to look like this:

let App = {
  init() {
    let root;

    $(document).on("turbolinks:load", () => {
      root = new Vue({
        el: '#root',
        components: {
          'hello': Hello
        }
      })
    });

    $(document).on("turbolinks:before-render", () => {
      root.$destroy();
    });
  }
}

Gotchas + Known Issues

Cannot find package when importing in .vue file:

This is a known issue. If the only place a package is imported is in a .vue file - it will throw an error about being unable to find a packge. To get around this, import package into any .js file. Usually I just stick them in my main app.js.