Global component registration in Vue using <script>

Question

I'm learning Vue and would like to use vue-tabs.
The instructions for "installing" it globally are:

//in your app.js or similar file
//  import Vue from 'vue';  // Already available
import VueTabs from 'vue-nav-tabs';

Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

However, Chrome 66 doesn't like the import statement. VueTabs is defined as a top-level var in vue-tabs.js:

import VueTabs

Uncaught SyntaxError: Unexpected identifier

Some of the above might be incorrect. I'm still muddling my way through the basics of modern web development. So I'd appreciate a little higher-level description of whether I can do this or why not. It seems all the documents I find assume familiarity with pre-compilation and build steps.

I'd like to avoid using npm, webpack or yarn, etc, for the time being in order to focus on Vue. I like that Vue can be used by simply downloading vue.js into a local directory and then making it available using only a <script> tag.

I've tried using <script https://...vue-tabs.js> but haven't had any luck as with Vue.
Is it possible to use vue-tabs the same way, or is some kind of pre-compilation or build step going to be required?

"Chrome does not seem to like it" is not a very specific error message... Is there a error in the console? lf so post that error — Patrick Hollweck
– Patrick Hollweck, Commented Sep 17, 2018 at 5:05
@TomRussel Have you tried to use Vue.use(VueTabs); in your script as it is a plugin I guess it will need to be intalled if not done automtically on browsers. — Shubham Sharma
– Shubham Sharma, Commented Sep 17, 2018 at 5:21
@ShubhamSharma "Uncaught ReferenceError: VueTabs is not defined" — Tom Russell
– Tom Russell, Commented Sep 17, 2018 at 5:24
The instructions you're following are intended for a project using a bundler like Webpack. I suggest you start out by using vue cli. Otherwise, you should be following these installation instructions — Phil
– Phil, Commented Sep 17, 2018 at 6:13

Harshal Patil · Accepted Answer · 2018-09-17 09:05:09Z

3

It should be simple for you. If you don't want to use bundler like Webpack, then your HTML would be something like:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

    <div id="app">
        <vue-tabs>
            <v-tab title="First tab">
              First tab content
            </v-tab>

            <v-tab title="Second tab">
              Second tab content
            </v-tab>

            <v-tab title="Third tab">
              Third tab content
            </v-tab>
        </vue-tabs>
    </div>

    <!-- Load Vue.JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <!-- Load Vue-Tabs -->
    <script src="https://unpkg.com/[email protected]/dist/vue-tabs.js"></script>


    <!-- YOUR APPLICATION JS FILE -->
    <script type="text/javascript">
        new Vue({
            el: "#app"
        });
    </script>

</body>
</html>

Also, you won't have to do any plugin installation or component registration as you are using it without ES modules or bundler. VueTabs will automatically install the plugin and register components when running as an old-school script.

edited Sep 17, 2018 at 9:05

answered Sep 17, 2018 at 8:38

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tom Russell Over a year ago

@Harshall Patil Thanks. My page loads without errors, but still no tabs. Is there some kind of vue-tabs registration in app.js?

Harshal Patil Over a year ago

@TomRussell, Did you create your own component? In your own component, you will have to put the above tab generation code.

Tom Russell Over a year ago

Harshal Patil Would you please list the contents of app.js?

Harshal Patil Over a year ago

@TomRussell, I have modified my answer and simplified it. Please refer to it.

Harshal Patil Over a year ago

@TomRussell, The solution is not really the recommended way if you are building a large scale Vue.js application; nevertheless, this will get you started.

|

Collectives™ on Stack Overflow

Global component registration in Vue using <script>

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related