VueJS and Laravel

I have now been working with Laravel and VueJS for some time and it has been a completely amazing experience. Both of these frameworks have improved my production speed significantly. Laravel does an amazing job for the backend and VueJS serves a nice finish to the frontend.

Keen UI

The greatest part for VueJS though, is the component based structure and easiness for implementing these into your project. You might already know about AngularJS' Material components that is made to create a streamlined UI experience across all of Googles applications. I really like the design of it, therefor I was happy when I saw a guy named Josephus Paye is porting this design into VueJS components. I want to highlight his effort here and at the same time tell you how to set up VueJS in Laravel.

You can find his work here, don't forget to visit the GitHub page too: http://josephuspaye.github.io/keen-ui/

Components

The package is still in development, but most components you might need are ready and I'm using it in my production already. The beautiful thing about VueJS is that when you have set it up, you don't have to focus on it. You can use components in packages like this as if it was native HTML.

To give a few samples. If you want to create a button, simply write this tag and the attributes you need.

<ui-button
           color="primary"
           icon="add">
    ADD POST
</ui-button>

This is all the code that is needed to create a button, that will look like this. If you check out the examples on his page, you will see that it also have some effects:

Of course for a greater user experience, it's recommended to wrap some logic into VueJS, for example adding a spinner when the button is clicked to display it's loading state.

For the full list of attributes please take a look at the documentation http://josephuspaye.github.io/keen-ui/#/ui-button-docs

Setting up VueJS

VueJS is easiest set up with Laravel if you Elixir. Start by pulling in VueJS, Vueify and KeenUI to you project with NPM.

npm install vue --save
npm install laravel-elixir-vueify --save
npm install keen-ui --save

You might have to do it as root if you are on MacOS or Linux

Update your gulpfile.js by adding the require vueify statement right after you require Elixir:

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

In your Elixir mix function tell Gulp to parse your Browserify file. Browserify was pulled in along Vueify

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

In your resources js folder, that is resources/assets/js, create the main.js file you just references above. Add the following content to the file:

var Vue = require('vue');

new Vue({
  el: 'body',

  components: {

  },
});

Usually you might want to change body to #appname and put that ID to a div to scope your app, but for simplicity we leave it to body here, that will make VueJS apply to all your content.

Pulling in Keen UI

If we take a look at the documentation for pulling in Keen UI at GitHub https://github.com/JosephusPaye/keen-ui you now have 2 options. Either add the requirement on top to pull in everything or require components as needed. If you want to pull in everything, simply make sure the first 2 lines of your main.js file looks like this:

var Vue = require('vue');
var Keen = require('keen-ui');

If you for performance reasons instead want to only pull in what you need, you need to require every component and then register them to your VueJS app. Here is an example for the UiButton as exampled before, it should be self describing how to perform the operation on other components:

var Vue = require('vue');
var UiButton = require('keen-ui').UiButton;

new Vue({
  el: 'body',

  components: {
    UiButton
  },
});

You are now ready to go and can use the button as shown earlier.

Making it work

I almost forgot to mention that you of course need to run Gulp after this in order to make it work.

Write your comment…

Hi,

I've followed these instructions exactly on a fresh Laravel 5.3 install, however when I add:

<ui-button color="primary" icon="add"> ADD POST </ui-button>

to the welcome view it just displays text, I have tried pulling in /js/main.js from the public folder but still can't get it to work, what am I missing here?

Show all replies

Yes it just displays the plain text and not the button it should, I get the following error in the console: [Vue warn]: Unknown custom element: <ui-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I can add simple vue.js script by declaring const app = new Vue({ in app.js and it works fine but for some reason following your instructions above and declaring vue in main.js is not working for me.

Reply to this…

The Author Card

Emil Moe's photo

Emil Moe

Software Engineer

Appreciations

1.4K

Location

All over the world

Joined

Apr 6, 2016

Hashnode Evangelist