[Vuejs]-Trying to use Vue.js library from CDN but I get Uncaught SyntaxError: Unexpected identifier

by

0👍

✅

Since you’re using both Vue and vue tags input from CDN, you cannot rely on import/export.
So, first you need to remove them from your code: both the

 import VueTagsInput from '@johmun/vue-tags-input';

and the

export default {}

for the Vue component.

On top of that, should the vue tags input work, your Vue component code won’t work: the

<template>
<script>
<style>

syntax from Vue single file components cannot be used in the browser right away. Also, you’re not importing/rendering the component from any Vue instance, so, even if both the component and the vue tags input worked, nothing would appear in the html page.

In order to get the thing working you need two things:

  • Declaring a Vue instance and mount it in an html tag with the el property. I chose #element for the tag id.
  • Paste the vue tags input html code inside that HTML.

The following modified snippet just works:

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

Since vue tags input auto loads itself into window when you import it from a cdn, you don’t need to import/refer the component in the Vue instance.

👤Sergeon

Leave a comment