Currently, I am diving into the world of Vuejs and experimenting with integrating bootstrap/vue-bootstrap components like Card or b-table. However, I encountered some issues along the way.
[Vue warn]: Failed to resolve component: b-table If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at
Upon attempting to import components in the javascript file, I faced the following error:
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
I followed the suggestion to install @vitejs/plugin-vue as mentioned above, but unfortunately, the issue persisted.
Here's a snippet of my code:
<header>toDoList</header>
<b-table striped hover :items="list"></b-table>
<input v-model="newTask">
<input v-model="newTaskDate">
<button @click="addnewTask()">add new Task</button>
</template>
<script>
import { BTable } from bootstrap-vue;
export default {
data() {
return {
list: [{name:"Doing something",date:"1"}],
newTask: '',
newTaskDate: ''
}
},
methods: {
addnewTask() {
this.list.push({name:this.newTask, date:this.newTaskDate})
}
}
}
</script>
In my main.js file:
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/main.css'
createApp(App).mount('#app')