Mark
Reputation: 65
Issues with importing vue resource
Description
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.
Additional Notes: index.html is used in the public folder >>
vue.js <!DOCTYPE html>
<html lang="en">
**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
import VueResource from 'vue-resource'
Vue.use(VueResource)
var app = new Vue({
el: '#form-id',
data: {
formStatus: false,
blog: [{
id: '',
title: '',
}
]
},
methods: {
},
mounted: function(){
}
})
<!DOCTYPE html>
<html lang="en">
<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>Dexterous - Technology News Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand mb-0 h1">Dexterous</a>
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Highlights</a></li>
<li class="nav-item"><a class="nav-link" href="#">Categories</a></li>
</ul>
</nav>
<!--End of Navigation bar-->
<div class="container-fluid">
<div class="row">
<div class="col">
<!--Carousel Slides-->
<div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#dexterous-slides" data-slide-to="0" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="1" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
</div>
<a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End of Carousel Slides-->
</div>
</div>
<!--Action tools: Create a new post-->
<div id="form-id">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>Post Management</h5>
</div>
<div class="card-body">
<button v-on:click="formStatus = !formStatus" class="btn btn-light">➕ Add new Post</button>
<button v-on:click="" class="btn btn-light">📝 Manage Post</button>
</div>
</div>
</div>
</div>
<!--Form-->
<div class="row" v-if="formStatus">
<div class="col-md-12 mt-3">
<div class="card bg-light">
<div class="card-header">
<h3>Create a Post</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="blogTitle"><h5>Title:</h5></label>
<input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title...">
</div>
<div class="form-group">
<label for="blogContent"><h5>Content:</h5></label>
<textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."></textarea>
</div>
<button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2">Add Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Form end-->
<div class="row mt-3">
<div class="col-md-4">
<div class="card w-100" style="width:18rem;">
<div class="card-header"><h5>Year</h5></div>
<ul class="list-group list-group-flush">
<li class="list-group-item">2017</li>
<li class="list-group-item">2018</li>
<li class="list-group-item">2019</li>
</ul>
</div>
<div class="card w-100 mt-3" style="width:18rem;">
<div class="card-header"><h5>Posts</h5></div>
<ul class="ml-3 list-group list-group-flush">
<li class="list-group-item">Welcome to Dexterous</li>
<li class="list-group-item">New Javascript JS</li>
<li class="list-group-item">2019</li>
</ul>
</div>
</div>
<!--Content fields-->
<div class="col-md-8">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">Welcome to Dexterous</h5>
<p class="card-text">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!</p>
<a href="#" class="btn btn-dark">Read more</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-end mb-3 ">
<div class="col-md-8">
<div class="card bg-light">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">New Javascript JS</h5>
<p class="card-text">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!</p>
<a href="#" class="btn btn-dark">Read more</a>
</div>
</div>
</div>
</div>
</div>
<!--Functional scripts-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
- Node.js and npm is updated ✅
- Missing semicolon(So far I have not noticed any) ✅
The only problem was the import so I would just comment it out and bam!. The rest of the code would work.
Anyway to fix it?
Upvotes: 0
Views: 205
Answers (1)
Ana Liza Pandac
Reputation: 4871
VueResource is already available as a global variable when you imported it like this:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
That means you can use Vue.use(VueResource); without having to re-import it like this: import VueResource from 'vue-resource'.
In your browser console, check if it's available by using this: typeof VueResource. If it returns a function, it works perfectly. Otherwise, it would return an undefined value.
Upvotes: 1
Related Questions
- Getting error while importing {ref} from vue?
- Can't bring in Vue from import but can access it if I bring it in html file
- Unable to import Vue from vue
- Problems while importing external js files to vue app
- Problems while trying to import css file to vue.js
- Import Vue breaks Vue
- How to import Vue.js correctly
- VueJS - Vue is not defined
- importing js file in Vue project throws error
- Vuejs, import component file issues