25.06.2018 Views

Full-Stack Vue.js 2 and Laravel 5

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Installing <strong>Vue</strong>x<br />

<strong>Vue</strong>x is an NPM package that can be installed from the comm<strong>and</strong> line: $ npm i -<br />

-save-dev vuex<br />

We will put our <strong>Vue</strong>x configuration into a new module file store.<strong>js</strong>: $ touch<br />

resources/assets/<strong>js</strong>/store.<strong>js</strong><br />

We need to import <strong>Vue</strong>x in this file <strong>and</strong>, like <strong>Vue</strong> Router, install it with <strong>Vue</strong>.use.<br />

This gives special properties to <strong>Vue</strong> that make it compatible with <strong>Vue</strong>x, such as<br />

allowing components to access the store via this.$store.<br />

resources/assets/<strong>js</strong>/store.<strong>js</strong>: import <strong>Vue</strong> from 'vue'; import <strong>Vue</strong>x from 'vuex';<br />

<strong>Vue</strong>.use(<strong>Vue</strong>x); export default new <strong>Vue</strong>x.Store();<br />

We will then import the store module in our main app file, <strong>and</strong> add it to our <strong>Vue</strong><br />

instance.<br />

resources/assets/<strong>js</strong>/app.<strong>js</strong>: ... import router from './router';<br />

import store from './store'; var app = new <strong>Vue</strong>({ el: '#app', render: h => h(App),<br />

router, store });

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!