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>
Related
How could i continue music playback even while changing pages using Vue js?
Principle of operation:
1. The user starts listening to music on page example.com
2. He goes to the example.com/about and the music he started to listen to doesn't stop.
I guess that i have to the music in the parent component as it’s own separate component, but i am not sure.
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import About from './components/About'
import Main from './components/main'
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Main },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router
}).$mount('#app');
About.vue
<template>
<div id="about">
<h1>The about page</h1>
<br>
<router-link to="/">Back to main page</router-link>
<br>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
main.vue
<template>
<div id="about">
<h1>The main page</h1>
<br>
<router-link to="/about">Go to about page</router-link>
<br>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
Create a new component for the audio, and import that into your App.vue and place it outside <router-view></router-view>. E.g:
/components/AudioComponent.vue (can't use Audio.vue because there is already an audio HTML element)
<template>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</template>
<script>
export default {
// maybe take the src filename and controls on/off attribute as props?
// maybe provide some methods for external control via an event bus or shared state
}
</script>
/App.vue
<template>
<div id="app">
<!-- put a shared header here, e.g. links to routes, top bar, sidebar menu, etc -->
<router-view></router-view>
<audio-component></audio-component>
<!-- put a shared footer here -->
</div>
</template>
<script>
import AudioComponent from './components/AudioComponent.vue'
export default {
name: 'app',
components: {
AudioComponent,
}
}
</script>
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
}
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>
I am using vue init webpack my-project to start learning vue.js I am version 2.9.2 and when I start the project it only renders the logo, nothing else. I even downloaded the vue plug-in on Chrome and they're no issue shown.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>Core Docs</li>
<li>Forum</li>
<li>Community Chat</li>
<li>Twitter</li>
<br />
<li>Docs for This Template</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>vue-router</li>
<li>vuex</li>
<li>vue-loader</li>
<li>awesome-vue</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
I am very new to vue and wanted test it out and I really like Angular's CLI but this one has me completely confused.