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);
                console.log(vm.data_url);
                vm.render(data.type, data.data);
            }, function (response) {
                console.log(response);
            });
        },
        props: {
            data_url: {
                required: true
            }
        },
        template: `
        <div>
                <canvas v-el:canvas></canvas>
        </div>
        `,
    
        data()
        {
            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

    <body>
    
    <div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <graph data_url='http://localhost:8080/bar.php'></graph>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>              
    <script src="/js/compiled.js"></script>
    <script>
         Vue.use(VueResource);
         new Vue({
             el: 'body',
    
             components: {Graph}
         });
    </script>
    </body>
    </html>
    

Log in to reply