I'm in studying with Vuejs and I tried to use bootstrap/vue-boostrap component like Card or b-table but when I use them
[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
then I tried to import component in javascript and this what I got:
[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.
So, I import #vitejs/plugin-vue according above, but it still got same.
App.vue
<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 somwthing",date:"1"}],
newTask: '',
newTaskDate: ''
}
},
methods: {
addnewTask() {
this.list.push({name:this.newTask, date:this.newTaskDate})
}
}
}
</script>
main.js
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')
BootstrapVue is not Vue 3 compatible at the time.
You can only use BootstrapVue with Vue 3 Migration Build.
Check the Vue.js 3.x initial support and be sure your configure your setup accordingly.
Maybe it's a typo on your side, but what about this one? Note the quotes in the import statement.
import { BTable } from 'bootstrap-vue';
Related
i am following their docs for adding my custom build to vue 3, here is my component
//in script setup
import CKEditor from '#ckeditor/ckeditor5-vue'
import ClassicEditor from 'ckeditor5-custom-build/build/ckeditor'
const editor = ClassicEditor
const ckeditor = CKEditor.component
//in template
<ckeditor :editor="editor" v-model="data.content"></ckeditor>
i got error that said The requested module '/ck5/build/ckeditor.js' does not provide an export named 'default' then i tried import {Editor} and import {ClassicEditor} neither of them works. then i tried import from src since i thought it was because of vite and seems like it works (there is no error about importing again neither default or named) but i got another error :
TypeError: Cannot read properties of null (reading 'getAttribute')
at IconView._updateXMLContent (iconview.js:100:24)
at IconView.render (iconview.js:76:8)
at IconView.<anonymous> (observablemixin.js:212:41)
at IconView.fire (emittermixin.js:170:43)
at <computed> [as render] (observablemixin.js:215:25)
at ViewCollection._renderViewIntoCollectionParent (viewcollection.js:204:9)
at ViewCollection.<anonymous> (viewcollection.js:65:9)
at ViewCollection.fire (emittermixin.js:170:43)
at ViewCollection.addMany (collection.js:150:18)
at ViewCollection.add (collection.js:118:21)
What should i do?
I think the doc is showing very clearly. First, you need to register Ckeditor as a Vue plugin:
import { createApp } from 'vue';
import CKEditor from '#ckeditor/ckeditor5-vue';
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );
Then you can use it in your component:
<script setup>
import Editor from 'ckeditor5-custom-build/build/ckeditor';
</script>
<template>
<ckeditor :editor="Editor"></ckeditor>
</template>
You have to import it like this.
After installing these packages
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-classic
You can use it in two ways.
Registering the component globally.
Using the component when needed.
1. Registering the component globally:
import the script like this.
import { createApp } from 'vue';
import CKEditor from '#ckeditor/ckeditor5-vue';
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );
Thats all, it has been registered, and now <ckeditor> will be automatically identified.
2. Using the component when needed:
Import the script like this.
<script setup>
import { component as CKEditor } from '#ckeditor/ckeditor5-vue'
const CKEditorConfig = reactive({
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
}
})
</script>
<template>
<div>
<CKEditor :editor="CKEditorConfig.editor" v-model="CKEditorConfig.editorData" :config="CKEditorConfig.editorConfig"></CKEditor>
</div>
</template>
I don't know how to solve this problem.
When I started project vue3.js , console show me this error.
This import in pinia store.
I tryied change first line with import to
"import Vue from 'vue';" (without curcy braces), but error don't disappear.
import { Vue } from 'vue';
import { defineStore } from 'pinia';
import moment from 'moment';
import _ from 'lodash';
import router from '#/router';
if you are using latest version of vue , vue3
this code
import { Vue } from 'vue';
is no longer global instance
I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps.
First of all, I followed the document of mavonEditor, mavon component is not defined.
I installed mavon-editor(v2.10.4) using by npm.
And then, change the main.js like below.
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
createApp(App).use(mavon).mount("#app");
and I tried to use editor component to App.vue like that.
<template>
<div>
<mavon-editor v-model="value" />
</div>
</template>
<script>
import { ref } from "#vue/reactivity";
export default {
setup() {
const value = ref("its my first mavon editor!");
return { value };
},
};
</script>
Open the browser(Chrome), but any items wasn't show.
Instead of editor, that error occurred in console.
Uncaught ReferenceError: mavon is not defined
I really want to know how to correctly use mavon-editor in Vue3.js.
Does anyone help me, please?
you can add this
app.use(mavonEditor)
and remove mavon from
createApp(App).use(mavon).mount("#app");
hope this help you solve the problem
I promise I've read every related post I can find, but I'm getting any clear answers (as far as I can tell, but I'm new to Vue).
Details:
I'm using Vue v2.5.15
We are using webpack (I've read that this may affect how I have to use components)
I'm attempting to use this range slider component. I've tried to follow the documentation, but I keep getting an error stating [Vue warn]: Unknown custom element: <vue-slider> - did you register the component correctly?. I've tried reading the documentation and probably 20 different posts, but I'm still not getting this. Here is basically what I have in my JS file:
<!-- HTML -->
<div id="app">
<vue-slider
v-model="sliderRange"
:min="minPriceBase"
:max="maxPriceBase"
></vue-slider>
</div>
// Javascript
import Vue from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
export default {
components: {
VueSlider
}
}
Vue.component('VueSlider', VueSlider);
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider: window['vue-slider-component']
}
});
I've also read through the Vue docs on components and I can't figure what I'm doing wrong. How do I correctly register my component?
Update:
I've discovered that if I use:
components: {
VueSlider
}
Instead of:
components: {
VueSlider: window['vue-slider-component']
}
Then I stop getting error mentioned above. Instead I get an error stating [Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got Boolean. But think it's progress? Why would `window['vue-slider-component'] be necessary?
Looking at the docs, i think you tried to do all the different import variants at the same time
new Vue({
el: '#app',
components: {
VueSlider: window['vue-slider-component']
}
})
seems to be the suggested way of accessing the component that was appended to the window if you do a direct import via the script by adding
<script src="./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>
(which you aren't doing)
Then there is two more ways, you can install the component globally by using
// main.js
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
Vue.component('VueSlider', VueSlider)
which would then make the vue-slider available to all the components in your application, so you don't have to import it multiple times. If you do this, you won't have to also define it locally. And finally the third option is to import it only locally:
// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
This would make the slider component only available to a single component. In your case, you can decide to either go for option 1:
import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);
or option 2:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
The error you are seeing now by the way, is that your minPriceBase that you're referencing is not a Number, you would have to set that data on the instance:
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
},
data () {
return {
minPriceBase: 0,
maxPricebase: 10
}
}
}
Be aware that in your code you pasted the export before your vue instance, you don't need to export anything there, you just need to define that component on the vue instance:
import VueSlider from 'vue-slider-component'
var vm = new Vue({
el: '#app',
data: {},
components: {
VueSlider
}
});
you should be able to get rid of this in your example, it doesn't do anything:
export default {
components: {
VueSlider
}
}
Recently, there was same problem and there was also 500 server side rendering error.
Anyway, I fixed and used that by using require.
if (process.browser) { // I am not sure if it is needed for you.
const VueSlider = require('vue-slider-component');
Vue.component('VueSlider', VueSlider);
Vue.use(require('vue-slider-component/theme/default.css'));
}
...
<vue-slider ...>
...
</vue-slider>
I'm using Vue.js with the vue-cli. I chose for the webpack setup.
I wired up the main.js file for routing, though I can't find a way to globally register my components.
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'
Vue.use(VueRouter)
let router = new VueRouter()
router.map({
'/companies': {
component: Companies
},
'/income': {
component: Income
},
'login': {
component: Login
}
})
router.start(App, 'body')
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import {Auth} from './lib/api'
import Loader from './components/Loader'
export default {
components: {
Loader
},
ready () {
Auth.isLoggedIn().then(
(response) => {
if (response.data === false) {
this.$router.go('/login')
} else {
this.$router.go('/companies')
}
},
(response) => {
this.$router.go('/login')
}
)
}
}
</script>
When I use my Loader component in some view, I get the following warning.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I provided the name in the component and it didn't make any difference. I'm using the loader-component in the login-view.
I found out that I should either define the component in the component that I'm going to use it or globally. Though, I can't find out how to define it globally with the routing.
The way you have it set up now, The loader component is only locally available in the template of the App component.
Routing has no influence on global component registration, just do it like without a router:
// main.js, before all the router stuff:
import Loader from './components/Loader'
Vue.component('loader', Loader)
or register it locally in your Login component. As you already did it in App.vue, you know what to do with Loader.vue