How do I pull component from <script src="js/myCompiled.js"></script>

  • So here is what I've got.

    • An es6 file containing the component I want to make available on the page via <script src="">
    • A browserified version of said component (and some other js)
    • An html file with a parent Vue instance/component.

    -- See Below --

    What I need help with
    • I need to get the parent vue instance to recognize/use the graph component from my compiled.js file that is referenced on the page in a script tag.
    • I need the graph child component to have access to vue-resource and chart.js
    • I want to pull vue and vue-resource from a cdn.

    import Chart from 'chart.js';
    export default Vue.extend({
        ready() {
            var vm = this;
            this.$http.get(vm.data_url).then(function (response) {                                                      
                var data = JSON.parse(response.body);
            }, function (response) {
        props: {
            data_url: {
                required: true
        template: `
                <canvas v-el:canvas></canvas>
            return {
                legend: '',
                type: '',
                data: {},
                chart: {}
        methods: {

    Here is my gulpfile

    var elixir = require('laravel-elixir');
    elixir(function(mix) {
        mix.browserify('./js/Graph.js', 'js/compiled.js');                                                               

    And in my index.html file I want to do something like this

        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <graph data_url='http://localhost:8080/bar.php'></graph>
    <script src=""></script>
    <script src=""></script>              
    <script src="/js/compiled.js"></script>
         new Vue({
             el: 'body',
             components: {Graph}

Log in to reply