Using Vue.js in Laravel 5.3

Question

In Laravel projects prior to 5.3 I\'ve utilised Vue.js using the script tag like this:

Answer 1

If you want to incorporate vuejs into app.js using gulp then you can do it with elixir:

Firstly, you need laravel-elixir-browserify-official from npm:

npm install laravel-elixir-browserify-official

Then place the following in package.json:

  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  }

Your resources/assets/js/app.js file would then just need:

  require('./bootstrap');

The bootstrap.js file should be in the "resources/assets/js" folder. I can't remember if this got installed with passport in my application, so if you don't have it then laravel provided the following code for "bootstrap.js":

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Now in gulpfile.js you can use:

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

And in your HTML you would have:

...

  @{{message}}

...

Now just run gulp

If you are not using elixir then you should be able to do a similar thing with the browserify or webpack packages from npm.

Edit

To answer your updated question, you can of course use vue.js for a single page. I personally use knockout for this stuff (I'm using vue because laravel passport uses it), but architecturally they are the same - they are MVVM libraries.

The point in MVVM is to bind your view to an underlying data model, so when one updates the other is automatically updated (i.e. updates in the dom automatically update the model and vice verser). Vue components are a simple way to reuse blocks of code, which is really good for creating widgets or complex components, but if you are simply looking to render data from a view model on to your page, then you would not usually need to create a component for that.

As for generating app.js, this entirely depends on your project. You cannot bind more than one view model to a view, so if you plan on using multiple view models in your project you would need to find a way to include the specific view model for your page. To achieve that I would probably remove the view model from app.js and keep the bootstrap and registered components there, then create separate view models that would need to be included on each page.