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.
Related
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.
I'm trying to create a custom component for some repetitive html. But the component won't show and I get this error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <Child>
<VApp>
<App> at src/App.vue
<Root>
My main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
Vue.component('child', {
props: ['text'],
template: `<div>{{ text }}<div>`
});
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
My App.vue:
<template>
<v-app>
<child :text="message"></child>
<Navbar/>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
<script>
import styles from './app.css'
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: { Navbar, Footer },
computed: {
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
},
},
data: () => ({
//
}),
};
</script>
What is going on? How to define a custom component?
My question "has mostly code"; so, my thoughts on vue.js: I notice that there are quite a few different ways or styles to build vue.js applications. I wish their examples would give more context on where to put the example code, I'm a seasoned developer, but new to web dev and js, and find that a lack of examples on the vue.js site really makes it hard to learn this framework.
Try this:
1- create a component in a separate .vue file
2- register it globally in main.js
3- then call it in any component directly.
1.
<template><div>{{ text }}<div></template>
<script>
export default{
props:['text']
},
</script>
2. in main.js
//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...
3 Now you can call it in any component because it is registered globally.
<template>
<div>
<child-component text='some text to pass as prop.'/>
//...
</div>
</template>
//...
I'm quite new with VueJS. I'm working on a new project with VueCLI3 & VuetifyJS.
I'm trying to create a reusable components based on VuetifyJS components and would like to make things easier by passing multiple props in a separate file to render them at once in my new component files.
I found this article that explains a technique to achieve such thing.
https://alligator.io/vuejs/passing-multiple-properties/
Every time I need to render them I must import my seperate file.
component1.vue
<template>
<v-btn v-bind='buttonProps'>
Button 1
</v-btn>
</template>
<script>
import { buttonProps } from './props.js';
export default {
data: () => ({ buttonProps })
}
</script>
component2.vue
<template>
<v-btn v-bind='buttonProps'>
Button 2
</v-btn>
</template>
<script>
import { buttonProps } from './props.js';
export default {
data: () => ({ buttonProps })
}
</script>
Is there any way to register the file globally so it allows me to use it anywhere in the app like this?
props.js
export const buttonProps = {
color: 'primary',
small: true,
outline: true,
block: true,
ripple: true,
href: 'https://alligator.io'
}
main.js
import Props from 'props.js';
component3.vue
<template>
<v-btn v-bind='buttonProps'>
Button 3
</v-btn>
</template>
<script>
... // no import needed
</script>
You can use a mixin and register that mixin globally.
buttonPropsMixin
export default {
data() {
return {
buttonProps: {
color: 'primary',
small: true,
outline: true,
block: true,
ripple: true,
href: 'https://alligator.io'
}
}
}
}
main.js
import buttonPropsMixin from '...';
Vue.mixin(buttonPropsMixin)
Note That each vue component has its own buttonProps, so if you change in one component the color it will not affect the other components!
If you want buttonProps to have the same state across all your components you can go the vuex way as Igor mentioned and use it with an mixin where you define the mapGetters in that mixin.
If data in props.js doesn't need to be reactive and all the components are children of some root component you could do this:
main.js:
import buttonProps from 'props.js';
new Vue({
el: rootComponentElement,
buttonProps: buttonProps,
render: h => h(rootComponent)
})
component.vue:
<template>
<v-btn v-bind='$root.$options.buttonProps'>
Button 3
</v-btn>
</template>
<script>
... // no import needed
</script>
Otherwise I would advice you to use Vuex or use the global bus method described here.
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)`
Am using vuetify to build a template but am getting an error
unknown custom element dashboard did you register the component correctly?
This is my code:
In the main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
Vue.use(Vuetify)
new Vue({
el: '#app',
render: h => h(App)
})
In my App.vue
<template>
<dashboard></dashboard>
</template>
<script>
import Dashbaord from './components/dashboard/Dashboard.vue';
export default {
name: "appinit",
components: {
"dashboard":Dashboard
}
}
And here is my dashboard
<template>
<v-app>
<left-drawer></left-drawer>
<toolbar></toolbar> <!-- Dashboard Toolbar-->
<main>
<v-container fluid>
..info are
</v-slide-y-transition>
</v-container>
</main>
<right-drawer></right-drawer>
<footer-area></footer-area>
</v-app>
</template>
<script>
imports ......
export default {
components: {
Toolbar, RightDrawer,LeftDrawer,FooterArea
}
}
What could be wrong as i have just separated the initial vuefy installation component into different component sections
The code is available at github on This link
What could be wrong?
You have few issues in your code.
You have to close tag in App.vue
Fix typo App.vue line 6 "Dashboard"
Remove footer-area from Dashboard.Vue (you don't have that component, yet ;) )