CODEWITHSUNDEEP
javascriptlaravelimportvue.jsvueify
Alec Gamble
Alec Gamble

Reputation: 461

Laravel using Vueify

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>

Upvotes: 1

Views: 991

Answers (1)

Gerard Reches
Gerard Reches

Reputation: 3154

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.

Upvotes: 1

Related Questions