current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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>
share|improve this question
    
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. – Gerard Reches Oct 26 '16 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? – Alec Gamble Oct 26 '16 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. – craig_h Oct 26 '16 at 10:02
up vote 1 down vote accepted

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.

share|improve this answer
    
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. – Alec Gamble Oct 26 '16 at 10:26
    
@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. – Gerard Reches Oct 26 '16 at 10:31
    
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. – Alec Gamble Oct 26 '16 at 10:40
    
@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. – Gerard Reches Oct 26 '16 at 10:48
1  
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. – Alec Gamble Oct 26 '16 at 11:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.