Vuetify - Unknown custom element problem with any component - vue.js

I've trying to solve this problem for the last 2 hours and can't find the solution. I created a new project with Vue cli and installed Vuetify with npm.
My files are like this
App.vue
<template>
<v-app id="app">
<HelloWorld/>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld
},
data: () => ({
//
}),
};
</script>
main.js
import Vue from 'vue'
import Vuetify from './plugins/vuetify';
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(Vuetify);
new Vue({
render: h => h(App)
}).$mount('#app')
HelloWorld.vue
<template>
<v-tabs>
<v-tab>Item One</v-tab>
<v-tab>Item Two</v-tab>
<v-tab>Item Three</v-tab>
</v-tabs>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
The error I get is:
**[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at components/HelloWorld.vue
at App.vue
**
I also tried to use any component directly in the vue.app and get the same problem. Before posting here I lookup to at least 10 different posts, and I read that I should call vuetify before the new Vue but that didn't solve the problem. I dont know if there is something missing or I just cant see the problem.
Thanks for reading my post

I suspect the problem is with <v-tabs>. I'm not very familiar with vuetify. Shouldn't this component be imported and registered (like any other component would be?).
EDIT
Oh I think you need to pass Vuetify
new Vue({
Vuetify,
}).$mount('#app')
They have a getting started doc here:
https://vuetifyjs.com/en/getting-started/quick-start
Try to setup your project in the same way.

try to follow the quick start documentation in Vuetify.
import vuetify from '#/plugins/vuetify'
new Vue({
vuetify,
}).$mount('#app')
your import path is '#/plugins/vuetify' instead of './plugins/vuetify'
and add the vuetify into your Vue({ }).$mount('#app') as shown above.
Hope it help

Related

Vue won't render custom component

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>
//...

Unknown custom element: <v-app> - did you register the component correctly? For recursive components

Hey I have a problem with importing vuetify into my project...
What am I doing wrong?
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
app.js:
import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import store from "~/store";
import router from "~/router";
import App from "~/components/App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
store,
router,
Vuetify,
...App
});
App.vue:
<template>
<v-app>
<loading ref="loading" />
<router-view />
</v-app>
</template>
<script>
import Loading from "./Loading";
export default {
el: "#app",
components: {
Loading
}
};
</script>
<style>
</style>
plugins/vuetify.js:
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "md" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c"
}
}
});
Had the same issue which has bugged my head for like an hour now, how this worked I don't know either: but this is what I changed when importing vuetify in vuetify.js
changed:
import Vuetify from 'vuetify/lib'
replaced it with:
import Vuetify from 'vuetify'
Note: this could be a laravel issue only because the official vuetify documentation has the first form.
got that project created with vue-cli v3? You either need to register components yourself or have a vuetify loader added, that parses your components and generates that list itself. the respective docu you can find here https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader
To add Vuetify to existing project you should follow the below procedure
In your project folder run,
npm install vuetify --save
In your app.js
import Vuetify from 'vuetify/lib'
// To add vuetify css file
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify({ ... })
To finish, you need to add a v-app component that wrap your entire application in order to make Vuetify works.
<v-app id="app">
<router-view/>
</v-app>
Change
new Vue({
store,
router,
Vuetify,
...App
});
To
store,
router,
vuetify: Vuetify,
...App
});
Step 1: Install Vuetify in your Project using "vue add vuetify" command
Step 2: In main.js write following code
import vuetify from './plugins/vuetify'; //plugins folder installed when you add vuetify
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
Step 3: Restart your Project because whenever you changed in main.js file then you need to restart your Project.
Docs at https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency suggest to create an instance pass it to mount.
beforeEach(() => {
vuetify = new Vuetify()
})
const wrapper = mount(CustomCard, {
localVue,
vuetify
})

How to properly inject app element in webpack? - Receiving [Vue warn]: Cannot find element: #app

Here is my code code example
I am trying to learn webpack 4 and am setting up a test project.
Traditionally I have built vuejs app inside Asp.net websites. So I always know the entry html point and can put the element on the page.
From all the blog post I have seen for vue this seems to be all they do to setup their app.
App.Vue
<template>
<div id='app'>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component
export default class App extends Vue {
}
</script>
index.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: (h) => h(App),
router
}).$mount('#app');
When I run this I get [Vue warn]: Cannot find element: #app. If I add
document.write('<div id="app"><router-view></router-view></div>');
The code runs fine. Since I am using vue-router, I don't think I actually need the App.vue file, but I still need someplace to mount the vue object too.
So looking at my github link, what would be the correct way to get this working?
This is a chicken-and-egg problem. You're trying to amount the root component to the #app div, but the #app div exists inside the App component. At the time when you call new Vue the #app div doesn't exist because the App component hasn't mounted!
Most Vue apps have an empty <div id="app"></div> in the index.html file so that the root Vue component has somewhere to mount to when the page has loaded.
If you don't want to do it that way then you can mount it manually instead:
const root = new Vue({
render: (h) => h(App),
router
}).$mount()
document.body.appendChild(root.$el)

Vuejs: How to use `v-b-modal directive` in BootstrapVue?

Here's my code (ERROR):
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
it outputs an error message:
[Vue warn]: Property or method "v" 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
When I use $refs method to create modal, it works :
<template lang="pug">
b-button(#click="showModal")
i.fa.fa-calendar
b-modal(ref="myModalRef" hide-footer title="some title")
span Hello form my modal
</template>
<script>
...
methods: {
showModal() {
this.$refs.myModalRef.show();
},
}
...
</script>
Here's my main App.js with BootstrapVue installed
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'font-awesome/css/font-awesome.min.css';
import Vue from 'vue';
import Moment from 'vue-moment';
import BootstrapVue from 'bootstrap-vue';
import DatePicker from 'vue2-datepicker';
import './assets/bootstrap.cosmo.min.css';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(Moment);
Vue.use(DatePicker);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
I just following the manual here: https://bootstrap-vue.js.org/docs/components/modal/
So far I have problem until I want to show some modal.
What's wrong with me?
The problem is pug. In:
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal#myModal
span Hello this is my modal!
</template>
The line:
b-btn(v-b-modal.myModal)
Messes things up. Use:
b-btn(v-b-modal.myModal="")
Reason:
b-btn(v-b-modal.myModal) creates <b-btn v-b-modal.myModal="v-b-modal.myModal">, which makes Vue search for that falue. Using b-btn(v-b-modal.myModal="") creates <b-btn v-b-modal.myModal=""> which solves the problem.
More: https://github.com/pugjs/pug/issues/370#issuecomment-2399051

Failed to mount component using vue-js-toggle-button

I tried to use the plugin for a project with Vue 2 but got a Vue warn like below.
[Vue warn]: Failed to mount component: template or render function not
defined
Inside vue component:
import ToggleButton from 'vue-js-toggle-button'
export default {
components: { ToggleButton }
}
Then,
<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/>
The plugin is not that popular and any help would be much appreciated.
You don't export the toggle button into another component. You import it in whatever component you want to use it and tell Vue to use it with Vue.use(ToggleButton). Then you can use it inside your component's template and export that whole component afterwards!
Example would be:
<template>
<toggle-button #someOfYourValues#></toggle-button>
</template>
In here, you don't import anything of the ToggleButton! You just use it as a tag inside your components!
Let's move on to your main js file where all the Vue instance creation takes place. Usually, it looks similar to this:
<script>
import Vue from 'vue'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
new Vue({
el: #yourDivInTheBaseHTMLFile
# some other stuff for your vue instance
})
</script>
I tested it inside my own current Vue project, which is a todo list with lots of components. It literally works inside every single one of them when you do a Vue.use().
If needed, I can link you to the project so you can have a look, but this simple explanation should do it ;)
For completeness (Vue SFC Class):
src/main.ts:
import Vue from 'vue';
import ToggleButton from 'vue-js-toggle-button';
Vue.use(ToggleButton);
new Vue({
...
render: h => h(App)
}).$mount('#app');
src/components/MyComponent.vue:
<template>
<toggle-button />
</template>
<script lang="ts">
import { ... } from "vue-property-decorator";
// do NOT import the component in here
#Component({
components: {
// do NOT declare the component in here
}
})
export default class MyComponent extends Vue {
}
</script>
<style scoped lang="scss">
</style>