Setting up Vue.js

Seventh Lesson in the Vue-Todo Series

Posted on July 30, 2016 in Laravel PHP Framework, Vue-Todo Series, vue.js

Setting up Vue.js

Laravel already comes with a few NPM dependencies. If you don't have Node or NPM installed follow the instructions here. Let's install them now. Run the following from your terminal:

npm install

This can take some time to finish. Once it has you should see

Image of Artisan tinker

You should also notice a new folder within your project called node_modules. This is where our downloaded npm dependencies live. So what did we just download? Well, open package.json from your root directory. Laravel provided this by default, and it contains a few devDependencies. It installs gulp, laravel-elixir and bootstrap-sass. I would recommend reading up about gulp as it is a very handy tool for asset management. laravel-elixir is a wrapper for gulp which gives extra features to use within our Laravel application. You can read more about it here. bootstrap-sass is the Bootstrap HTML, CSS & JS Framework. This framework makes it very easy to build responsive websites quickly without much design skills. Perfect for me then.

Our dependencies

So let's add some of our own. From your terminal run the following:

npm install --save vue vue-resource vue-router laravel-elixir-vueify

Once this has finished, you will notice that our package.json file now contains a dependencies section with dependencies we wanted. We will be using gulp and laravel-elixir in this application to help us build our JavaScript files. I like to be able to run gulp from the terminal without going through our node_modules folder. If you would too, run the following from your terminal:

npm install -g gulp

What this is doing is installing gulp globally. Giving us the ability to run gulp anywhere we want. Now open your gulpfile.js from your root directory and add the following:

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify')

elixir(function(mix) {
    mix.browserify('app/main.js');
});

We are pulling in laravel-elixir and laravel-elixir-vueify. Elixir by default will look within you resources/assets folder for the files you define in functions. So the function in our gulpfile will be looking for the file within resources/assets/js/app/main.js. Please do note the js folder as Elixir will default to this location for the .browserify process. Let's create a blank main.js file. Create it here resources/assets/js/app/main.js. Now from the terminal run:

gulp

and you should see the following results:

Image of Artisan tinker

If you now look in public/js you will see a new file called main.js which is the file we will include in our view.

Setting up our view

We are going to use the view Laravel has given us by default to serve our Vue app from. Open resources/views/welcome.blade.php and add the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Vue-Todo-Series</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div id="app"></div>

        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="/js/main.js"></script>
    </body>
</html>

For ease in this project, I am using a CDN to pull in the bootstrap and jQueury dependencies. In our body section we have a div with the id of app. This is where our Vue application will be injected. If you add any data around this div tag, Vue will not be able to manipulate or see it. Let's quickly set up a Hello World example to ensure Vue is working correctly. Open resources/assets/js/app/main.js and add the following:

import Vue from 'vue'

new Vue ({
    el: '#app',
    data: {
        message: 'Hello',
        name: ''
    }
})

Now run gulp from your terminal. Then open resources/views/welcome.blade.php and add the following within our <div id='app'></div> tag:

<div id="app">
    <p>@{{ message }} @{{ name }}</p>
    <input type="text" v-model="name">
</div>

If you now load http://vue-todo-series.dev within your browser you should see:

Image of Artisan tinker

This shows us that Vue is being loaded correctly, and that two-way data binding is great. So, to explain the code in our welcome.blade.php file we are creating a p tag and adding @{{ message }} @{{ name }} within. Now very quickly, the reason we are using @{{ }} is because Laravel has its own Template Engine, which uses {{ }} like Vue. To tell Laravel to ignore {{ }} we add the @ so that Vue can parse it instead. We will not need this in the future as we will be using self-contained Vue files. So, we are saying we would like to print the value of message and name which were defined in our main.js file. We then bind the name variable to our input so that we get two-way binding. Very handy feature.

Finish off with a basic app with routes

First, remove the contents of <div id="app"> so leaving just <div id="app"></div> again within our welcome.blade.php file.

Now open resources/assets/js/app/main.js and replace the contents with the following:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './Components/App.vue'
import HomePage from './Components/Pages/HomePage.vue'
import LoginPage from './Components/Auth/LoginPage.vue'

Vue.use(VueRouter)

export var router = new VueRouter()

router.map({
    '/': {
        component: HomePage
    },
    '/auth/login': {
        component: LoginPage
    }
})

router.start(App, '#app')

So, we are pulling in Vue again but we are also pulling in a few more resources. We are pulling in VueRouter and our Vue files which we will create shortly. Let's start with our App vue file. Create the new file here resources/assets/js/app/Components/App.vue and add the following:

<template>
    <div>
        <ul>
            <li><a v-link="{path: '/'}">Home</a></li>
            <li><a v-link="{path: '/auth/login'}">Login</a></li>
        </ul>
        <div class="container-fluid">
            <router-view></router-view>
        </div>
    </div>
</template>

So, what is this App.vue file? Well, these files allow us to put our view (within the <template> tags). Later you will also see us add <script> tag also which allows us to keep the logic unique to each Component within its file. This makes it so much easier to maintain applications. We also have <router-view> which is where vue-router will inject our views depending on the URI and component defined within our main.js file. We now need to create our HomePage and LoginPage components. Let's start with the HomePage component first. Create the new file here resources/assets/js/app/Components/Pages/HomePage.vue and add the following:

<template>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>Home</h1>
        </div>
    </div>
</template>

Now create LoginPage component here resources/assets/js/app/Components/Auth/LoginPage.vue and add the following:

<template>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>Login Page</h1>
        </div>
    </div>
</template>

Now run gulp from your terminal and navigate to http://vue-todo-series.dev to test the app out.

Image of Artisan tinker

Image of Artisan tinker

Next Time

In the next tutorial, we will create a basic template of the site and create our authentication views.


comments powered by Disqus