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