How to 'import' Vuejs component into index.html?

Question

I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html. It works fine. However, I'd like to use this component to add tags functionality.

But I receive this error :

This is how my code looks like:

     <script>
      import VTagInput from 'v-tag-input'
      Vue.use(VTagInput)
      var app = new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        components: {VTagInput},
        tags: []
        data: {
          errors: [],

I npm installed the package as specified in the github repo.

This is the head tag:

<head>
      <meta charset="utf-8">
      <meta name="author" content="Seif Elmughrabi">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
      <!--Google Icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <title>Your Insurance Policy Planner</title>
    </head>

when using CDN, a global variable should be created, so what matter is the order of the scripts tags, it should be vue, vue-tag, and there is no need to use import — AngelSalazar
– AngelSalazar, Commented Feb 13, 2018 at 14:57
@AngelSalazar vue-tag don't have CDN so I npam installed it. — Seif
– Seif, Commented Feb 13, 2018 at 14:59

Mohd_PH · Accepted Answer · 2018-02-13 15:03:18Z

7

You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/[email protected]/dist/v-tag-input.js , here is a working example

new Vue({
	el:"#app",
  data: {
    tags: ['foo', 'bar']
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/v-tag-input.js"></script>

<div id="app">
  <v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>

answered Feb 13, 2018 at 15:03

Mohd_PH

1,67713 silver badges19 bronze badges

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

Comments

Naramsim · Accepted Answer · 2018-02-13 14:59:12Z

0

You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally

answered Feb 13, 2018 at 14:59

Naramsim

8,9006 gold badges38 silver badges44 bronze badges

4 Comments

Seif Over a year ago

I added my head tag to the question. I npm installed VTagInput, it's not in the head as they don't have CDN, it's the only thing that I need to 'import'

Seif Over a year ago

I ran npm i --save v-tag-input

Naramsim Over a year ago

Just put the relative location or their CDN: unpkg.com/[email protected]/dist/v-tag-input.js

Naramsim Over a year ago

--save add only an entry to the package.json. you will find the library and the dist folder in your node_modules

Collectives™ on Stack Overflow

How to 'import' Vuejs component into index.html?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related