1

I'm trying to use Vueify in my first Laravel project and I'm not sure as to why it isn't working. I've installed (via npm) both vueify and laravel-elixir-vueify modules.

gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');

elixir(function(mix) {
  mix.scripts([
    'vendor/vue.min.js',
    'vendor/vue-resource.min.js'
  ], 'public/js/vendor.js')
    .sass('app.scss')
    .webpack('app.js');
});

app.js

import Vue from 'Vue';
import Chart from './components/Chart.vue';

Vue.component('chart', Chart);

My console is giving me the error: Unknown custom element: <chart> any ideas on what isn't working or what I've missed? I've become a bit confused about what I need to install or how to include things. I've also got a handful of pages which each have their own .js file under /public/js/. I'm not sure if this is good or bad practice with regards to using elixir. But if it's not a bad way to do it ideally I'd want to import the .vue files from /resources/assets/js/components/ to those js files so that I only have to load in the ones which are relevant to each page. But I'm really not sure if that's the wrong way to go about it. Any ideas? I've searched around for answers but nothing seems to have helped me yet.

Just for testing my Chart.vue file looks like this.

Chart.vue

<template id="learnometer-chart">
  <div id="myPieChart" style="width:1000px; height:1000px; background-color:red;"></div>
</template>

<script>
</script>
Improve this question
3
  • Is a Laravel 5.3 project? If that is the case, you doesn't need vueify, it ships with webpack doing the same by default. Commented Oct 26, 2016 at 9:59
  • ah okay yes it is 5.3, I didn't realise that. how do I import the .vue files so it will recognise the component then? Commented Oct 26, 2016 at 10:02
  • yes,vueify is for browserify, although it doesn't look like you are actually using it, so that shouldn't be the issue. Commented Oct 26, 2016 at 10:02

1 Answer 1

Reset to default
1

Assuming that you are using Laravel 5.3 and Vue 2.0, you can now compile with webpack.

gulpfile.js

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

require('laravel-elixir-vue-2');

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

Register your components on your resources/assets/js/app.js:

require('./bootstrap');

Vue.component(
    'chart',
    require('./components/Chart.vue')
);

const app = new Vue({
    el: '#app'
});

Your components should be inside resources/assets/js/components.

The package.json should look something like:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

When you have this, run npm install or npm install --no-bin-links if you are on Windows. Now you can run gulp to compile your vue files.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you so much for your response. I've essentially got almost identical to this but with some extra dependencies. From what I understand running gulp is going to make elixir combine the assets into an app.js file under /public/js/app.js is that correct? I'm then importing that in my layout template blade.php file in '/resources/views/layouts/master.blade.php` as <script src="/js/app.js"></script>. If I do this before the app div then it can't find app which makes sense to me but if I put it afterwards the seperate js files for pages won't recognise Vue.
@AlecGamble Yes, the compiled public/js/app.js already has all your required dependencies and your vue components registered, it's ready for use. Are you saying #app, right? make sure you have a <div id="app"> wrapping all the content inside the body. In Vue 2.0 you can't target el to the html or body tag, this is the reason of the <div id="app">. Load the script before the body.
yep I've definitely got the <div id="app"> element wrapping the content (but not the navbar currently, I wasn't really sure what convention was with regards to that). If I have my script src="/js/app.js"></script> above the the app element I get the error Cannot find element: #app if I place it inside then I get Failed to mount component: template or render function not defined. and if I place it after I get Vue is not defined because some of the pages which extend the template import scripts which create new Vue objects but I guess I haven't imported it yet.
@AlecGamble Oh, sorry. I'm loading it after the body. About the Vue is not defined error, Vue is defined in resources/assets/js/bootstrap.js by default, and this file required in the app.js file which is the compiled file by webpack. Make sure your bootstrap file looks like the original. Another detail, I don't think that use an id in your component template tag is a good idea. Now with Vue 2.0 you must use a wrapping container in each of your components.
That is probably the right solution. I don't really have much of a background in this (I come from programming games in unity and I've had some work with Yii framework on a pre-existing project and cordova and some stuff) so I probably don't have the fundamentals to look at it the right way but I'm learning a lot. Anyway I'll look into this and accept this answer. Thanks a lot man.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.