Registering components globally in Vue using the <script> tag allows for seamless integration

I'm currently diving into Vue and am interested in incorporating vue-tabs into my project.
The guidelines for globally "installing" it are as follows:

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

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

However, I've encountered an issue with the import statement, specifically in Chrome 66. It seems that VueTabs is defined as a top-level var within vue-tabs.js:

import VueTabs

Uncaught SyntaxError: Unexpected identifier

It's possible that some of the information above might not be entirely accurate. As I navigate my way through the fundamentals of modern web development, I'd appreciate a more simplified explanation of whether or not this approach is feasible and why. Most resources I come across assume knowledge of pre-compilation and build processes.

For now, I prefer to steer clear of using npm, webpack, or yarn in order to focus solely on working with Vue. I enjoy the simplicity of being able to utilize Vue by downloading vue.js locally and including it via a straightforward <script> tag.

I attempted using 

<script https://...vue-tabs.js>
, but unfortunately had no success similar to when using Vue.
Is there a way to implement vue-tabs in the same manner, or will some form of pre-compilation or build process ultimately be necessary?

javascriptvue.jsweb-component

Answer №1

Here's a straightforward way for you to set up VueTabs without using bundlers like Webpack in your HTML:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfbf8e8cdbfa3b8a3bcba">[email protected]</a>/dist/vue.js"></script>

    <!-- Load Vue-Tabs -->
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ee8ebfbb3f0ffe8b3eafffceddeaeb0abb0a9">[email protected]</a>/dist/vue-tabs.js"></script>


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

</body>
</html>

Furthermore, you don't need to worry about plugin installation or component registration when using VueTabs without ES modules or bundlers. VueTabs will handle the installation of the plugin and component registration automatically when included as a traditional script.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to access the body prior to uploading a file using multer?

In my current project, the administrators are able to upload MP3 files and input parameters such as the song name. I have chosen to utilize the multer middleware for managing multipart/form-data. The issue I am facing is that req.body.gender always retur ...

javascriptnode.jsexpressmulter

React: Introducing the latest router feature post-login

I'm facing an issue with the Router in React. After a successful login, I am changing the type state in Redux from 0 to 1. However, when I try to make a switch in my App file, I encounter an error. Warning: [react-router] You cannot change <Router ...

javascriptreactjsredux

Using .NET Core 3.1 along with Vue, Axios, and incorporating the use of [ValidateAntiForgeryToken

I've spent the entire day working on this and researching as much as I can, but I have been unsuccessful in getting it to function. Despite comparing my implementation with the Microsoft documentation and various answers on Stack Overflow, none of th ...

c#vue.jsasp.net-coreaxiosantiforgerytoken

Saving the data retrieved from a fetch request at a specified URL into a variable in JavaScript

I'm having some trouble loading data from a URL into a variable using .ready(). When I try to display the value in an alert box, it shows up as undefined. Can anyone offer some guidance on how to fix this? const fetchMasterProd = () => { ...

javascriptjqueryjson

What is the best way to include an object within an array that is a property of another object in React.js?

Greetings, I apologize for the somewhat ambiguous title. It was a challenge to find a clearer way to express my thoughts. Currently, I am engrossed in my personal project and have encountered a particular issue. I would greatly appreciate any advice or gu ...

javascriptreactjsfullcalendar

Tips for providing support to a website without an internet connection

I am in the process of creating a sales platform for a grocery store that utilizes PHP/MySQL. I have come across some websites that are able to fully reload and function even without internet access. For instance, when I initially visited abc.com, everyth ...

javascriptphp

Please explain the concept of the Node.js event loop

I've spent countless hours poring over guides and resources on the event loop, yet I still can't grasp its essence. It's common knowledge that the libuv library is responsible for implementing the event loop, but what exactly is this entity ...

javascriptnode.js

Encountering an Invariant Violation: React does not allow objects to be used as children

I can't figure out why my code isn't working. Every time I run it, I get the error message: Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of chil ...

javascriptreactjsasynchronous

Setting the initial state with an undo action in React: a step-by-step guide

Is it possible to display a snackbar with an undo action when dragging and dropping events in a react-big-calendar? https://i.stack.imgur.com/QFmYA.png I am trying to implement functionality where clicking on the undo action will revert the event back to ...

javascriptreactjsdrag-and-dropsetstatereact-big-calendar

Utilizing JavaScript for form creation

Still learning the ropes of JavaScript and feeling a bit unsure about my skills. I'm trying to use JavaScript to create a new window with an input form within it. Managed to get a basic window set up with a dropdown menu, but struggling to implement ...

javascript

Getting started with JavaScript arguments can be overwhelming for newcomers

Can you figure out why the variable 'a' doesn't increase by 1 in the following code snippet? var a = 5; function abc(y) { y++; } abc(a); // The value of 'a' remains 5, instead of increasing to 6. Why is that? However, when ...

javascript

Long-term responsibilities in Node.js

Currently, I have a node.js server that is communicating between a net socket and a python socket. The flow is such that when a user sends an asynchronous ajax request with data, the node server forwards it to Python, receives the processed data back, and ...

javascriptpythonajaxnode.jssockets

Discover the identity of an element through the value of another element

Looking for a way to retrieve the id value based on the input value in this HTML code. For instance, I need to identify the id value associated with the input value of number2 - which is unknown2. How can this be achieved using jQuery? <th id="unknow ...

javascriptjqueryhtml

How to fix jQuery animate queue issue so animations run at the same time

Previously, I successfully used the jQuery queue modifier for simultaneous animations. However, this time around, I am facing difficulties in getting it to work. You can view the issue on the following page: . When you click on "notifications" at the top ...

javascriptjqueryajaxjquery-animate

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

javascriptjqueryhtmlcsshtml5-video

The Vue mixin properties are devoid of content and lack reactivity

Could you please guide me in the right direction if this question has already been asked before? I really hope it's not a duplicate. I have a Vue application that is compiled using Webpack@NPM. In order to pass a property (roles) across all component ...

javascriptvue.jsaxios

Mastering the art of using the async pipe in conjunction with rxjs

I require assistance as the loading component of my async pipe does not activate, despite the data loading correctly. The loading template fails to trigger during subscription even though I am using a BehaviorSubject in my service. I have attempted various ...

javascriptangularasync-awaitrxjs

Utilizing JavaScript to manage a div's actions throughout various pages

I am currently working on an HTML project that involves having a collapsible text box on each page. However, I am struggling to figure out the best way to achieve the desired behavior. Essentially, some of the links will belong to a class that will set a v ...

javascriptvariableseventslisteners

Inadequate speed and efficiency in Javascript and JQuery operations

I'm facing severe lag problems in my JavaScript code, particularly with the parallax effects being very slow. I suspect this is due to multiple executions of functions. Below is the code snippet: function tada() { $(".arrow").addClass("tada"); s ...

javascriptjquery

jQuery MaskMoney - position input at the start of the field

Check out this jsfiddle I created to showcase the issue I'm facing. Whenever I click on the input field, the cursor automatically goes to the end. This means that I have to start typing cents before dollars, which is not the behavior I want. My desire ...

javascriptjquery