CODEWITHSUNDEEP
javascripthtmlvue.jstagsnpm-install
Seif
Seif

Reputation: 759

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

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 :

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>

Upvotes: 1

Views: 16050

Answers (2)

Mohd_PH
Mohd_PH

Reputation: 1677

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>

Upvotes: 7

Naramsim
Naramsim

Reputation: 8782

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

Upvotes: 0

Related Questions