title: Issues with importing vue resource
body: <p><strong>Description</strong></p>
  
  <p>I am creating a simple news publishing site for a personal project. At this stage, I have been trying to make use of the Http.get by using the VueResources but I am stuck on this error which I do not understand. I want to develop it without using the Vue CLI. </p>
  
  <p>Additional Notes: 
  index.html is used in the public folder >></p>
  
  <pre><code>vue.js &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  **Error Code:**
  app.js:1 Uncaught SyntaxError: Unexpected identifier
  
  I have tried the following:
  I searched through the internet and the results so far are to check for
  
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    import VueResource from 'vue-resource'
      Vue.use(VueResource)
  
      var app = new Vue({
  
          el: '#form-id',
          data: {
              formStatus: false,
              blog: [{
                  id: '',
                  title: '',
  
              }
              ]
          },
          methods: {
          },
          mounted: function(){
          }
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
          &lt;title&gt;Dexterous - Technology News Site&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
              crossorigin="anonymous"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;!--Navigation bar--&gt;
          &lt;nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light"&gt;
              &lt;a class="navbar-brand mb-0 h1"&gt;Dexterous&lt;/a&gt;
              &lt;ul class="navbar-nav"&gt;
                  &lt;li class="nav-item active"&gt;&lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Highlights&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Categories&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;!--End of Navigation bar--&gt;
  
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col"&gt;
                      &lt;!--Carousel Slides--&gt;
                      &lt;div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000"&gt;
                          &lt;ol class="carousel-indicators"&gt;
                              &lt;li data-target="#dexterous-slides" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                              &lt;li data-target="#dexterous-slides" data-slide-to="1" class="active"&gt;&lt;/li&gt;
                              &lt;li data-target="#dexterous-slides" data-slide-to="2" class="active"&gt;&lt;/li&gt;
                          &lt;/ol&gt;
                          &lt;div class="carousel-inner"&gt;
                              &lt;div class="carousel-item active"&gt;
                                  &lt;img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100"&gt;
                              &lt;/div&gt;
                              &lt;div class="carousel-item"&gt;
                                  &lt;img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100"&gt;
                              &lt;/div&gt;
                              &lt;div class="carousel-item"&gt;
                                  &lt;img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev"&gt;
                              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next"&gt;
                              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;!--End of Carousel Slides--&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!--Action tools: Create a new post--&gt;
              &lt;div id="form-id"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-12"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header"&gt;
                                 &lt;h5&gt;Post Management&lt;/h5&gt;
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;button v-on:click="formStatus = !formStatus" class="btn btn-light"&gt;➕&amp;nbsp;Add new Post&lt;/button&gt;
                                  &lt;button v-on:click="" class="btn btn-light"&gt;&amp;nbsp;Manage Post&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
              &lt;!--Form--&gt;
  
                  &lt;div class="row" v-if="formStatus"&gt;
                      &lt;div class="col-md-12 mt-3"&gt;
                          &lt;div class="card bg-light"&gt;
                              &lt;div class="card-header"&gt;
                                  &lt;h3&gt;Create a Post&lt;/h3&gt;
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;form&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="blogTitle"&gt;&lt;h5&gt;Title:&lt;/h5&gt;&lt;/label&gt;
                                          &lt;input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title..."&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="blogContent"&gt;&lt;h5&gt;Content:&lt;/h5&gt;&lt;/label&gt;
                                          &lt;textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."&gt;&lt;/textarea&gt;
                                      &lt;/div&gt;
  
                                      &lt;button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2"&gt;Add Post&lt;/button&gt;
                                  &lt;/form&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--Form end--&gt;
  
              &lt;div class="row mt-3"&gt;
                  &lt;div class="col-md-4"&gt;
                     &lt;div class="card w-100" style="width:18rem;"&gt;
                      &lt;div class="card-header"&gt;&lt;h5&gt;Year&lt;/h5&gt;&lt;/div&gt;
                          &lt;ul class="list-group list-group-flush"&gt;
                              &lt;li class="list-group-item"&gt;2017&lt;/li&gt;
                              &lt;li class="list-group-item"&gt;2018&lt;/li&gt;
                              &lt;li class="list-group-item"&gt;2019&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
  
                  &lt;div class="card w-100 mt-3" style="width:18rem;"&gt;
                      &lt;div class="card-header"&gt;&lt;h5&gt;Posts&lt;/h5&gt;&lt;/div&gt;
                          &lt;ul class="ml-3 list-group list-group-flush"&gt;
                              &lt;li class="list-group-item"&gt;Welcome to Dexterous&lt;/li&gt;
                              &lt;li class="list-group-item"&gt;New Javascript JS&lt;/li&gt;
                              &lt;li class="list-group-item"&gt;2019&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!--Content fields--&gt;
              &lt;div class="col-md-8"&gt;
                      &lt;div class="card"&gt;
                              &lt;img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript"&gt;
                          &lt;div class="card-body"&gt;
                              &lt;h5 class="card-title"&gt;Welcome to Dexterous&lt;/h5&gt;
                              &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!&lt;/p&gt;
                          &lt;a href="#" class="btn btn-dark"&gt;Read more&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row justify-content-end mb-3 "&gt;
                  &lt;div class="col-md-8"&gt;
                      &lt;div class="card bg-light"&gt;
                          &lt;img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript"&gt;
                          &lt;div class="card-body"&gt;
                              &lt;h5 class="card-title"&gt;New Javascript JS&lt;/h5&gt;
                              &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!&lt;/p&gt;
                          &lt;a href="#" class="btn btn-dark"&gt;Read more&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
              &lt;/div&gt;
             
          &lt;/div&gt;
          &lt;!--Functional scripts--&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
          &lt;script src="../app.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
              crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
              crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
              crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  </code></pre>
  
  <ul>
  <li>Node.js and npm is updated ✅</li>
  <li>Missing semicolon(So far I have not noticed any) ✅</li>
  </ul>
  
  <p>The only problem was the import so I would just comment it out and bam!. The rest of the code would work. </p>
  
  <p>Anyway to fix it?</p>