Static GitHub Issues

[954] Non vue.js javascript in .vue templates (for a client side)

prev: Integration with Meteor
next: How to use bootstrap with nuxt.js.

Hello, first of all thanks for such a promising framework. I'm just started to learn nuxt.js and want to know how flexible it is for a non vue.js javascript.


Here is a tasks that I'm trying to solve right now. I know there was already a few question about this, but I'm still does not found an answer.

I want to know how to use non vue.js javascript in .vue templates (for a client side).

For example

/pages/contacts.vue

<template>
    <!-- html -->
</template>

<script>
    /*
    For a client side(browser) of that page i want to include next js files:

    some external files:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

    and a few local files:

    - assets/js/a.js 
    - assets/js/b.js 
    - assets/js/c.js

    better as a bundle (make a single js file)
    also i want to leave a config for this scripts

    window.pageContacts = {
        // some data
    };

    and i need some callback or global event when all .vue templates are mounted, 
    like jquery ready, i need to know when it is safe to use generated markup.
    */
</script>

Currently i have this solution in my mind, but maybe there is better way to solve this trivial task?

/pages/contacts.vue

<template>
    <!-- html -->
</template>

<script>
export default {
    head: {
        // Include external js files
        script: [
            { type: 'text/javascript', src: '//maps.googleapis.com/maps/api/js?v=3.exp' },
        ]
    },
    mounted: function() {

        if (process.BROWSER_BUILD) {

            // Leave a config
            window.pageContacts = {
                // some data
            };

            // Include local js files, not a bundle but better than nothing =(
            some_helper_that_will_add_script_files_to_document(
                ['assets/js/a.js', 'assets/js/b.js' 'assets/js/c.js']
            );

            /* 
                Still dont know how to trigger event when ALL .vue templates are ready to use
                maybe @ /layouts/default.vue at mounted event ?
            */
        }

    }
}
</script>

p.s. Sorry for a possible mistakes in english language.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c827">#c827</a>)</em></sub></div>