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,
});
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');
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')
I've added a main vue app in my application. And I want to add a component to the app.
Trying to add TopMenu.vue to the App.vue:
<top-menu></top-menu> in App.vue.
Registered in main.js for app.
Am I using the single file components correct?
main.js
import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue({
el: '#app',
render: h => h(App),
components: {
'top-menu': TopMenu
}
})
App.vue:
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
}
};
</script>
TopMenu.vue:
<template>
<div class="user-menu drop-shadow"></div>
</template>
<script>
export default {
name: 'top-menu',
data: function () {
return "somedata";
}
}
</script>
You should import it and use it inside your App.vue :
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
import TopMenu from './TopMenu'
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
},
components: {
'top-menu': TopMenu
}
};
</script>
import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue.component('top-menu', TopMenu)
This is how you should register component globally and you can use it anywhere.
I'm struggling with this stupid bug in Vuejs. showMenu is defined in computed. The store has the right value as well.
Apparently if I remove the following from Header.vue, the console is clear from errors. But, I've always worked like that and this is the first time I have this error.
<script src="./header.js"></script>
<style src="./header.scss" lang="scss" scoped></style>
[Vue warn]: Property or method "showMenu" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
main.js
import Vue from 'vue';
import router from '#/router';
import { store } from '#vue/store/index.js';
import i18n from '#vue/i18n.js'
import App from '#vue/components/App.vue';
Vue.config.productionTip = false;
new Vue({
store,
i18n,
router,
render: h => h(App),
}).$mount(`#app`);
App.vue
<template>
<div id="app">
<div v-if="showMenu"><app-header></app-header></div>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script src="./App.js"></script>
<style src="./App.scss" lang="scss"></style>
App.js
import Vue from 'vue';
import AppHeader from '#vue/components/app/header/Header.vue';
export default {
name: `App`,
components: {
AppHeader,
},
data() { return {
}},
computed : {
showMenu(){ return this.$store.state.ui.showMenu; }
}
};
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')
}
}