Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
template>
<v-app>
<Navbar/>
<div>
<v-content class="mx-4 mb-4">
<router-view></router-view>
</v-content>
</div>
</v-app>
</template>
<script>
import Navbar from '#/components/Navbar'
export default {
name: 'App',
components: {
Navbar
},
data: () => ({
//
}),
};
</script>
Navbar.vue (current)
<template>
<div>
<v-app-bar app flat color="">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>
<span>Sample App</span>
</v-toolbar-title>
</v-app-bar>
</div>
</template>
....
....
Navbar.vue (desired)
no template because I want to use render function
<script>
export default {
...
...
render(createElement){
const icon = createElement('v-app-bar-nav-icon')
return createElement('v-app-bar', [icon])
...
...
}
}
When I try this I get an errors:
vue.common.dev.js?4650:630 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any suggestions?
For future reference:
You simply have to import the vuetify components manually into the vue component.
Navbar.vue
<script>
import { VAppBar, VAppBarNavIcon } from "vuetify/lib";
export default {
render(createElement) {
const icon = createElement(VAppBarNavIcon)
return createElement(VAppBar, {}, [icon]);
},
};
</script>
More info at this link.
Related
I'm trying to access another page after i search for something in my search bar, but when i press enter nothing happens.
I already tried many different ways to access the DisplayBooks page after i searched for a books, but it only shows the DisplayBooks component in the url and the book data in the console.
Main.vue
<template>
<v-container>
<v-row class="text-center mt-10">
<v-col class="mb-4" >
<h3 class="display-2 font-weight-bold mb-3">
Your mobile library
</h3>
<p class="subheading font-weight-regular">
<v-text-field v-model="query" #keyup.enter="search" label="Search"></v-text-field>
</p>
</v-col>
</v-row>
</v-container>
</template>
<style scoped>
</style>
<script>
import axios from 'axios';
import router from '/router';
export default {
data() {
return {
query: ''
}
},
methods: {
async search() {
const url = `https://www.googleapis.com/books/v1/volumes?q=${this.query}`;
const response = await axios.get(url);
const books = response.data.items;
console.log(books)
router.push({
path: '/displaybooks',
name: 'displaybooks',
props: { books: books }
});
}
}
}
</script>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import DisplayBooks from '#/components/DisplayBooks.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/displaybooks',
name: 'displaybooks',
component: DisplayBooks,
props: true
}
]
})
Main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from '/router'
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
I made a Vue 2 web page and tried to use vue-router v3 to route to a different page. The web page is as follows:
src/App.vue: the web page opens from here
<template>
<div id="app">
<GoHere/>
</div>
</template>
<script>
import GoHere from './views/gohere/GoHere.vue'
export default {
name: 'App',
components: {
GoHere
}
}
</script>
src/main.js:
import Vue from 'vue'
import App from './App.vue'
import router from "./router/router"
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/views/gohere/GoHere.vue: the page from which the issue arises
<template>
<div>
<v-btn #click="goHere()">
Go Here
</v-btn>
</div>
</template>
<script>
export default {
name: "GoHere",
methods: {
goHere() {
this.$router.push("/menu")
}
}
}
</script>
src/views/menu/Menu.vue: the page to redirect to
<template>
<div>
Menu
</div>
</template>
<script>
export default {
name: "Menu",
}
</script>
src/router/router.js: the router file
import Vue from 'vue'
import VueRouter from 'vue-router'
import GoHere from '../views/gohere/GoHere'
import Menu from '../views/menu/Menu'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: "gohere", component: GoHere},
{ path: '/menu', name: "menu", component: Menu}
]
const router = new VueRouter({
routes
})
export default router
When I clicked on the button in GoHere.vue, the URL changes into "http://localhost:8080/#/menu" but the content does not change into the content for Menu.vue. How can the problem be solved?
The component from the current route will automatically render in <router-view></router-view>
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
Check the docs
I'm using v-swich component in one of my child components.
The component itself is rendered at view but when i click on it the toogle doesn't
change the state visually.
I followed this Tutorial to import v-switch manually into child component
https://vuetifyjs.com/en/customization/a-la-carte/#manually-importing
Child Component
<template>
<v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</template>
<script>
import { VSwitch } from 'vuetify/lib'
export default {
name: 'Configurator',
components: {
VSwitch
},
props: ['product', 'variants'],
data()
{
return {
switch1: true
}
}
}
</script>
Main.js
import Vue from 'vue';
import ConfiguratorApp from './components/Configurator.App';
let vm = new Vue({
el: '#configurator-app',
render: h => h(ConfiguratorApp)
});
So what i'm missing here?
Vuetify needs its wrapper v-app in order to function properly.
<template>
<v-app>
<v-switch v-model="switch1" :label="`Switch 1: ${switch1.toString()}`"></v-switch>
</v-app>
</template>
Just add that as your app's root component.
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 tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
I use import instead of require(in main.js) and it works for me:
import Global from './components/Global.vue
Vue.component('global', Global)`