I'm using webpack to bundle all my files together, but I'm having issues with trying to import the template component I created with default name, I keep getting ModalRight is not defined.
This is my App.js file that I'm referencing as the entry in the webpack.config.js
import Vue from '../../public-assets/js/vue/vue.js';
import ModalRight from '../../public-assets/js/vue/components/ModalRightSlide.vue';
window.Vue = Vue;
In my base file, I'm trying to call it like so:
var app = new Vue({
el: '#app',
data: {
},
components: {
ModalRight
},
});
I've also tried in another page using Vue.component('modal', ModalRight ); and <modal></modal> in the html, but I just get that error.
This is the ModalRightSlide.vue file
<template>
<div>
foobar
</div>
</template>
<script>
export default {
}
</script>
Related
Instead of mounting my component directly to #app, I'm trying to push my component one level down so I can pass props to it from the HTML file it lives in. However, nothing shows up and there aren't any console errors. I'm sure it's just me misunderstanding how Vue 3 and createApp works.
My HTML file:
<div id="app">
<my-component />
</div>
My main JS file:
import { createApp } from 'vue'
import MyComponent from './pages/MyComponent.vue'
import { IonicVue } from '#ionic/vue'
const app = createApp({
components: {
MyComponent: {
props: {
},
}
},
})
.use(IonicVue)
.mount("#app");
Thank you in advance!
I'm trying to import v-movable (https://github.com/thewebkid/v-movable) in a component inside my Vue app created with Vue CLI 4, but I keep getting the following error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Movable>
<Intro>
<App> at src/App.vue
<Root>
Currently my main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app');
And my Intro.vue component file looks like this:
<template>
<div class="intro">
<div class="guideline">
<div class="circle start-circle"></div>
<movable class="circle end-circle">
<IconSlideUp id="icon-slide-up" />
<span class="label">Slide</span>
</movable>
<div class="line"></div>
</div>
</div>
</template>
<script>
import IconSlideUp from '#/assets/icon-slide-up.svg'
import movable from 'v-movable'
export default {
name: 'Intro',
props: {
msg: String
},
components: {
IconSlideUp,
movable
},
methods: {
}
}
</script>
<style scoped lang="scss">
...
</style>
Do I need to globally register movable in my main.js? How would I go about doing that? Any help would be very much appreciated, and please do let me know if there's any other information I can/should provide.
In the project's Github demo, there is a component import, which can be done in a SFC this way:
import movable from './components/movable';
https://codesandbox.io/s/mystifying-cartwright-yvis1
You are using the plugin installation, but doing it inside of a component instead of main.js, and it's missing Vue.use. Remove the import from your component and change main.js:
main.js
import Vue from 'vue'
import App from './App.vue';
import movable from 'v-movable';
Vue.use(movable);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
I am trying to use VueRangedatePicker and I can't seem to figure out how to use this on the template of some other vue component. I am using Webpack.
I have registered the component/plugin on my main.js file like this:
import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/store'
import firebase from './firebase-config'
import vuefire from 'vuefire'
//////////////// HERE
import VueRangedatePicker from 'vue-rangedate-picker' // importing the plugin here
Vue.use(VueRangedatePicker) // using it
Vue.component('VueRangedatePicker', { }) // creating the component globally (if I don't add this line the app complains the component is not registered
////////////////
Vue.config.productionTip = false
let app;
Vue.use(vuefire)
firebase.auth().onAuthStateChanged(function(user){
if (!app) {
/* eslint-disable no-new */
app = new Vue({
el: '#app',
template: '<App/>',
components: { App, VueRangedatePicker },
router,
store,
VueRangedatePicker
})
}
})
Then on my component component_A.vue I am again importing the VueRangedatePicker plugin in the following manner:
<template>
<div>
<vue-rangedate-picker #selected="onDateSelected" i18n="EN" />
</div>
</template>
<script>
import firebase,{ itemRef } from '../firebase-config';
import VueRangedatePicker from 'vue-rangedate-picker'
export default {
firebase() {
return {
items: itemsRef,
}
},
name: 'component_A',
data () {
return {
}
},
created() {
console.log(VueRangedatePicker);
},
methods: {
onDateSelected: function (daterange) {
this.selectedDate = daterange
},
}
</script>
I know the plugin/component is registered because when I log the Vue Rangedate Picker on the console I can see the object
However I am getting the an error message like this
I have read the complete readme.md file on the project's github but I am still puzzled. What is Vue_Daterange_picker? Is it a plugin? Is it a component? Is it a plugin that allows me to build a component? I am quite confused. Can you clarify this for me a little better? How can I make this work?
This is because you have registered the component with an empty name.
In main.js :
Vue.component('DatePicker', VueRangedatePicker)
Then in your component use the component as :
<date-picker></date-picker>
I am new to Vue2 and Single-File Components.
I have some complex components that I have compiled via Rollup
e.g.
/src/components/a.vue
<template>
....
</template>
<script>
export default {
...
}
</script>
/src/components/b.vue
<template>
...
<ComponentA/>
....
</template>
<script>
import ComponentA from './a'
export default {
...
components: {
...,
ComponentA,
...
},
...
}
</script>
/src/index.js
import ComponentA from './components/a'
import ComponentB from './components/b'
var myMod = {}
myMod.ComponentA = ComponentA;
myMod.ComponentB = ComponentB;
window.myMod = my.Mod
which together ends up in build/main.js and I source into my project.
My project is not a full view app.
If I want to use either ComponentA or ComponentB in my app, do I always need to do:
var foo = 10;
var compBInstance = new Vue({
el: '#this-comp-b-instance',
components: {myMod.ComponentB},
data: function() {
// data defined outside of this
foo: foo
},
template: `<ComponentB :foo='foo'/>`
})
or is there a way for me to be able to just write <ComponentB :foo='10'/>
I started a project using vuejs-templates and webpack.
Then I added bootstrap-vue to the project.
Now, I am not sure how to add a bootstrap button.
In main.js I am importing BootstrapVue:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
Vue.use(BootstrapVue)
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
However, I when I try and use the <b-button> element in App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<b-button :size="size" :variant="variant" #click="clicked">
Click Me!
</b-button>
<hello></hello>
</div>
</template>
Errors are thrown about all the property attributes associated with the <b-button> element.
How do I use this?
You should define at your app Vue instance following:
data:{
size: 0, //needed size
variant: 'success' // needed variant
},
methods:{
clicked(){
console.log('im clicked')
}
}