Issue
This Content is from Stack Overflow. Question asked by Vlad
I try to deploy Vue app for uploading on GitHub Pages, but got such parse error:
95:
^
96:
97: <Navbar
error during build:
Error: Parse error @:95:10
at parse$b (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:33668:355)
at Object.transform (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:42856:27)
My code:
<script >
import { RouterLink, RouterView } from "vue-router";
import Navbar from "./components/Navbar.vue";
import Contacts from "./components/Contacts.vue";
import Modal from "./components/Modal.vue";
import AddButton from "./components/AddButton.vue";
export default{
components: {
Navbar,
Contacts,
Modal,
AddButton
},
data(){
return {
currentId: 1,
modalOpen: false,
contacts: [],
edit: false,
editContact: {},
search: ''
}
},
created(){
this.getContacts()
},
computed: {
// filterContacts(){
// return this.search ? this.contacts.filter(contact =>
// contact.fullName.toLowerCase().includes(this.search.toLowerCase())) :
this.contacts;
// },
filterContacts(){
return this.search ?
this.contacts.filter(contact => {
for(let key in contact){
if(String(contact[key]).toLowerCase().includes(this.search.toLowerCase())){
return contact;
}
}
})
: this.contacts;
},
// filterContactsCategory(){
// return this.search ? this.contacts.filter(contact =>
contact.category.toLowerCase().includes(this.search.toLowerCase())) : this.contacts;
// }
},
methods: {
openModal(){
this.modalOpen = true
},
closeModal(){
this.modalOpen = false
this.edit = false
},
addContact(item){
this.contacts.push(item)
this.modalOpen = false
},
deleteContact(id){
let index = this.contacts.findIndex(contact => contact.id == id)
this.contacts.splice(index, 1)
},
changeContact(id){
this.edit = this.modalOpen = true
let pickedContact = this.contacts.find(contact => contact.id == id)
this.editContact = pickedContact
},
editedContact(contactEdited){
this.contacts.forEach(contact => {
if(contact.id == contactEdited.id) {
contact.fullName = contactEdited.fullName
contact.phoneNumber = contactEdited.phoneNumber
contact.email = contactEdited.email
contact.category = contactEdited.category
}
})
},
getContacts(){
const localContacts = localStorage.contacts
if(localContacts){
this.contacts = JSON.parse(localContacts)
}
}
},
watch: {
contacts: {
handler(newContacts){
localStorage.contacts = JSON.stringify(this.contacts)
},
deep: true
}
}
}
</script>
<template>
<Navbar
@searchValue="search = $event"
/>
<Contacts
:contacts="filterContacts"
@delContact="deleteContact"
@changeContact="changeContact"
:search="search"
/>
<Modal
:edit="edit"
:editContact="editContact"
@addContact="addContact"
:currentId="currentId"
v-show="modalOpen"
@closeModal="closeModal"
@editedContact="editedContact"
/>
<AddButton
@openModal="openModal"
/>
<RouterView />
</template>
Solution
did you put
import vue from '@vitejs/plugin-vue';
in your vite.config.js file, after (of course) installing it via npm?
This Question was asked in StackOverflow by Vlad and Answered by Stephan Frank It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.