I have a a component here in src/components/aboutUs.vue
<template>
<div>
<h1>This is a component test</h1>
</div>
</template>
And i have another vue file called Home.vue importing the component aboutUs.
<template>
<div class="home">
<div>HELLO !</div>
<aboutUs/>
</div>
</template>
<script>
import aboutUs from "#/components/aboutUs.vue";
export default {
name: "HomePage",
components: aboutUs
};
</script>
But my app.vue only renders "HELLO !" from Home.vue. and not the aboutUs component template. Help please.
You have to wrap your App components in {}. See docs
components: {
aboutUs
}
Related
Please see this minimum example, I have a simple component called HelloWorld.vue
HelloWorld.vue
<template>
<div class="foo">bar</div>
</template>
When I using this component like this
App.vue
<template>
<HelloWorld />
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
components: {
HelloWorld,
},
};
</script>
This rendered HTML looks like this
Rendered HTML
<div class="foo">bar</div>
However, when I add :is prop, rendered HTML changed
App.vue
<template>
<HelloWorld is="h2" />
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
components: {
HelloWorld,
},
};
</script>
Rendered HTML
<h2></h2>
Why is this happening?
Is it possible to overwrite only the outer HTML tag just like the class and style prop?
is should be used together with the component element:
<component is="h2"></component>
<HelloWorld is="h2" /> efficiently renders h2 instead of HelloWorld.
In order for root element to be configurable, the component should provide this:
<template>
<component :is="tag" class="foo">bar</div>
</template>
<script>
export default {
props: {
tag: {
type: String,
default: 'div'
}
}
}
</script>
I created a dashboard.vue component and I imported table.vue component into it but the table.vue doesn't appear in my web page and in the vue.dev tools.
When I import the table.vue in app.vue there's no issue.
Below my files.
Thanks in advance!
//dashboard.vue
<template>
<div>
<table></table>
</div>
</template>
<script>
import table from "./table";
export default {
name: 'Dashboard',
component: {
table,
}
}
</script>
<style >
</style>
//table.vue
<template>
<div>
<p>Test</p>
</div>
</template>
<script>
export default {
name: 'Table',
}
</script>
You cannot name components the same as reserved HTML elements. Change it to my-table.
You'll need to map it:
components: {
'my-table': table,
}
In my VueJS app I am using bootstrap-vue and want to use iframe inside a collapsable elements b-collapse. Because of some problems with iframe content and resizing (problem not related here) I found out that if I enable/disable b-embed with conditional rendering it works.
The parent component b-collapse has a data element called show which change its state if toggle is clicked. In my HelloWorld component I want that b-collapse can pass it's show value into the if check of b-embed.
My approach with this.$parent.$data.show isn't working and I am not sure if there is any better way to do so.
<template>
<div>
<b-btn v-b-toggle.logs>
<span class="when-opened">Close</span>
<span class="when-closed">Open</span>
Trace
</b-btn>
<b-collapse id="logs">
<b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
<div>Data: {{this.$parent.$data.show}}</div>
</b-collapse>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { Prop, Component, Inject } from "vue-property-decorator";
#Component
export default class HelloWorld extends Vue {
src = "http://localhost:7681/";
}
</script>
Like this:
parent.vue
<template>
<Child :show="myShow"></Child>
</template>
<script>
import Child from './child'
export default {
data () {
return {
myShow: 'StackOverflow'
}
},
components: {Child}
}
</script>
child.vue
<div>
<b-btn v-b-toggle.logs>
<span class="when-opened">Close</span>
<span class="when-closed">Open</span>
Trace
</b-btn>
<b-collapse id="logs">
<b-embed :src="src" v-if="this.$parent.$data.show"></b-embed>
<div>Data: {{this.$parent.$data.show}}</div>
</b-collapse>
</div>
<script>
export default {
props: {
show: {
type: Number,
require: true
}
}
}
</script>
Or use vuex to do this.
I got problem with vuejs, please help me
I have main.js:
import App from './App.vue'
import routes from './app.router';
Vue.use(BootstrapVue);
new Vue({
el:'#app',
render: h => h(App),
created(){
},
router: routes,
methods:{
}
})
My file App.vue:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import menuHeader from './components/layout/menu-header.vue'; // error when i import this component
components:{
menuHeader
}
</script>
This is my menu-header.vue:
<template>
<ul>
<li>
Hello
</li>
</ul>
</template>
<script>
export default {
name: "menuHeader"
};
</script>
My problem is when i add menu-header component, my page give me error:
Cannot set property 'render' of undefined
But if I don't, it run normally. Please explain why and help me fix it.
Many thanks.
It looks like you are not exporting Vue component definition properly from App.vue file:
<template>
<div id="app" class="">
<menu-header> </menu-header>
<router-view> </router-view>
</div>
</template>
<script>
import MenuHeader from './components/layout/menu-header.vue'; // error when I import this component
// Code is missing export
export default {
components: {
MenuHeader
}
}
</script>
It's my first Vue2 project, and I'm trying to create a component called Menu which will be used in the app's main page.
I created the project using vue-cli and my dependency manager is yarn. I run the project by yarn run dev.
This is my project structure:
myproject
- src
- components
- Menu.vue
- App.vue
- main.js
Menu.vue:
<template>
<ul class="nav">
<li class="active">
<a href="dashboard.html">
<i class="ti-panel"></i>
<p>Dashboard</p>
</a>
</li>
</ul>
</template>
<script>
export default {
name: 'Menu'
}
</script>
App.vue:
<template>
<div id="app" class="wrapper">
<div class="sidebar" data-background-color="white" data-active-color="danger">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
LOGO
</a>
</div>
<menu></menu>
</div>
</div>
</div>
</template>
<script>
import Menu from './components/Menu'
export default {
name: 'App',
components: {
'menu': Menu
}
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import Menu from './components/Menu'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App, Menu },
template: '<App/>'
})
When running yarn run dev no error is shown in the console, however the webpage shows a link with text "LOGO" and an empty <menu> element, while I was expecting vue to replace that tag with the <template> from Menu.vue.
Why isn't it working? What am I missing?
You should be getting this error (not sure why you aren't seeing it):
[Vue warn]: Do not use built-in or reserved HTML elements as component id: menu
The fix would be to change the component name to something that isn't a reserved HTML element:
<script>
import MyMenu from './components/MyMenu'
export default {
name: 'App',
components: {
'my-menu': MyMenu
}
}
</script>