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')
}
}
Related
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');
Help to fix error:
[Vue warn]: Unknown custom element: <app-page-test> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
(found in <Root>)
Why I dont see this component app-page-test in vue tools?
Information.
I added component to a custom page in the laravel project.
test.blade.php
#extends('layouts.app')
#push('scripts')
<script src="{{ asset('js/base/page/test/app.js') }}" defer></script>
#endpush
#section('content')
<div id="pageTest">
<app-page-test></app-page-test>
</div>
#endsection
resources/js/base/page/test/app.js
import Vue from 'vue';
import App from './components/main';
import store from './store/index';
Vue.component(
'app-page-test',
App
);
new Vue({
el: '#pageTest',
store
});
resources/js/base/page/test/components/main.vue
<template>
<div class="app-page-test">
<p>test</p>
</div>
</template>
<script>
export default {
name: "app-page-test",
mounted() {
console.log('Component mounted.')
}
}
</script>
try this way
import Vue from 'vue';
import App from './components/main';
import store from './store/index';
Vue.component('app-page-test', require('./components/AppPageTest.vue').default);
new Vue({
el: '#pageTest',
store,
});
I'm new to VueJs. I'm try to develop a theme using VueJs, I'm facing a problem by router, 'component not showing'. here is my code
Pagea.vue
<template>
<div>
<h1>Hello This is a test</h1>
</div>
</template>
<script>
export default {
name : "Pagea"
}
</script>
App.vue
<template>
<div id="app">
<router-link to="/">Go to Foo</router-link>
<router-link to="/Pagea">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {
Header,
Footer
}
}
</script>
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Vue.use(VueRouter);
Vue.config.productionTip = false;
//Router
import Pagea from './components/Pagea.vue';
const routers = [
{
path: '/pagea',
name : 'Pagea',
component : Pagea
}
];
const router = new VueRouter({
routers,
mode : 'history'
});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
There is no console error, but still to result. i don't know why the component or data not showing only empty page. please anyone could tell me what i did miss. As i early mansion that i'm new and still learning. Thank you.
The more sure, the issue is that your:
<router-link to="/Pagea">Go to Bar</router-link>
Should be:
<router-link to="/pagea">Go to Bar</router-link>
Since you have it declare as such in your router:
{
path: '/pagea', /* lower-case here */
name : 'Pagea',
component : Pagea
}
.....................................................................................................
However, if that doesn't solve it, then try the following:
Try the following and let me know if it did work for you.
Pagea.vue, remove the export and set the className to the div tag:
<template>
<div class="pagea">
<h1>Hello This is a test</h1>
</div>
</template>
Keep your vue files as clean an simple as you can.
Don't go mixing stuff there.
Remove the export out of your App.vue and make sure your to matches as case-sensitive.
In this case, you were indicating to go to '/Pagea' when your route was setup for '/pagea'
<template>
<div id="app">
<router-link to="/">Go to Foo</router-link>
<router-link to="/pagea">Go to Bar</router-link>
<router-view></router-view>
</div>
</template>
Move your router code into its own JS file:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Pagea from './components/Pagea.vue';
let routes = [
{
path: '/pagea',
name : 'pagea', /* Keep the name lowercase as in the className */
component: Pagea
}
];
export default new Router({
routes: ...
}
It will make your code cleaner and easier to maintain than everything in one file.
Then you can call your router.js in your main.js
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Very simple but seems to not be working. Must be because i'm new to VueJS. I downloaded this repo https://github.com/creotip/vue-particles. As I want to create a under construction page using this style.
Problem: I need to create a hamburger menu icon in the top right hand corner which on click calls a method to hide and show a div ( really basic stuff ). I've followed the vue JS tutorials and what people have said on stack overflow but I just cant get my template to speak to the method.
When I click on the hamburger button i keep getting "_vm.hello is not a function". What am i doing wrong? Please see screenshot. There must be something simple to solve this.
Heres what my code looks like:-
app.vue
<template>
<div id="app">
<div class="wrap-banner">
<div class="button_container" #click="hello()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App'
import Home from './components/home'
Vue.use(Home)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
methods: {
hello: function() {
alert('hello')
}
}
})
Screenshot
You need to move hello method to App.vue
App.vue
<template>
<div id="app">
<div class="wrap-banner">
<div class="button_container" #click="hello">
Demo Panel
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
methods: {
hello: function() {
alert("hello");
}
}
};
</script>
main.js
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Checkout demo at https://codesandbox.io/s/8y5yzv00nj
Vue File Architecture
You need to be aware that a Vue file normally has 3 components (HTML, Js and CSS). This file then needs to be processed with a compiler (babel for example) in order to make it readable for the browser. See Vue Single File Components for more information.
Clean Solution
The vue-cli gives you a working starter template with babel and webpack all preconfigured. Just create a vue project and change the template as needed.
Install Vue-CLI
vue create my-project
npm run dev
Quick Solution
If you do not want to use a compiler, just implement it like following:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
hello: function() {
alert('hello')
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<button #click="hello()">Click me</button>
</div>
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>