mardi 27 octobre 2015

Vueify, Browserify and (disabling) Hot Reload

I've used elixir & browserify before. However, I want to start using Vueify so I can have all my component's parts (HTML/CSS/JS) in 1 file.

It seems something has changed with laravel-browserify

The commonly (that I have found) answer is the following:

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

var vueify = require('laravel-elixir-browserify').init("vueify");

elixir(function(mix) {
    // resources/assets/js/main.js
    mix.vueify('main.js', {insertGlobals: true, transform: "vueify", output: "public/js"});
});

This throws the error:

Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities'
//...//
at Object.<anonymous> (C:\Users\BLANKED\Code\Project\node_modules\laravel-elixir-browserify\index.js:5:17)

So, some more searching around, and I find
http://ift.tt/1H8PQAl

elixir.config.js.browserify.transformers.push({
    name: 'vueify'
});

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

JeffreyWay's method will now gulp, however it doesn't seem to include any of the *.vue files, and instead replaces them with a vue-hot-reload-api function to presumably retrieve it.

Which seems great, and something that - no doubt - I will find very useful.
But it's not working, and I cannot figure out how to disable it.
And a very basic Vue App is not working. Or what I am doing wrong.

Edit:
To make it clear, I would be happy to gulp *.vue files without the hot reload working.
Perhaps this is something that just works when using homestead, but I'm hoping to do some quick & dirty testing without having to run up homestead

Final edit:

//gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
 name: 'vueify'
});

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


// main.js
var Vue = require('vue')
var App = require('./app.vue')

new Vue({
    el: 'body',
    components: {
        app: App
    }
})

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire