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

Question

I am using Django for backend and I want to use a Vue.js library for frontend. I am including them with CDN. The problem is that the first line of the script always gets the error Uncaught SyntaxError: Unexpected identifier. I suspect that this is because of the import, but I don't know how to use the library otherwise. Any ideas? Thanks in advance.

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">


            <title>title</title>


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

            <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

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

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

        export default {
          components: {
            VueTagsInput,
          },
          data() {
            return {
              tag: '',
              tags: [],
            };
          },
        };
</script>



<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>

    </body>
</html>

Sergeon Sergeon · Accepted Answer · 2018-07-29T19:22:00

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/[email protected]/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.

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

1 Answers