How to use VueJS 2 global components inside single file components? - javascript

I am trying to use a globally registered component (with Vue.component) inside a single file component but I am always getting
vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?
For example:
main.js:
...
Vue.component('my-component', {
name: 'my-component',
template: '<div>A custom component!</div>'
})
...
home.vue:
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
module.exports = {
name: 'home'
}
</script>
If I register it locally, it works OK:
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
module.exports = {
name: 'home',
components: {
'my-component': require('./my-component.vue')
}
}
</script>

You don't need the module.exports. You can register the component globally by having this within the mycomponent.vue file.
<template>
<div>A custom component!</div>
</template>
<script>
export default {}
</script>
Then add to main.js
import MyComponent from './component.vue'
Vue.component('my-component', MyComponent);
or I typically register them in a 'globals' file them import that into the main.
That should then allow you to use my-component anywhere in the app.

Component.vue
<template><div>A custom component!</div></template>
<script>export default { code here... }</script>
Use this component in home.vue:
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import component from './component.vue'
export default {
components: { my-component: component }
}
</script>

Related

vue3 convert to composite api then it show nothing

I checked several times, but my option API is working after I converted it to a composite API not working. I don't know what's wrong with it and it doesn't show any errors. However, it's not printing anything on the screen like my option API did. It only shows a warning.
runtime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: onboardland
If this is a native custom element, make sure to exclude it from component resolution via
This is my composite api that not working
<template>
<div>
<onboardland />
<onboardshow />
</div>
</template>
<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'
export default {
setup() {
return {
components: {
onboardland,
onboardshow
}
};
}
};
</script>
below is option api that is working
<template>
<div>
<onboardland />
<onboardshow />
</div>
</template>
<script>
import onboardland from './onboardland.vue'
import onboardshow from './onboardshow.vue'
export default {
components: {
onboardland,
onboardshow
}
}
</script>
You can use different styles in Vue 3 when using the composition API to define the components inside a Vue SFC.
You could use the <script setup> approach or you can use a normal <script> with the setup function and optional defineComponent.
With <script setup>
<template>
<div>
<OnboardLand />
<OnboardShow />
</div>
</template>
<script setup>
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'
// composition goes here...
</script>
With defineComponent
<template>
<div>
<OnboardLand />
<OnboardShow />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import OnboardLand from './onboardland.vue'
import OnboardShow from './onboardshow.vue'
export default defineComponent({
components: {
OnboardLand,
OnboardShow,
},
setup(props) {
// composition goes here.
},
})
</script>

vuejs : My vue component is not rendering

i have a vue component,but when i try to render it,its not render correctly instead shown as html tag
here is component code
view.vue
<template>
<div>
<h1>This is view component</h1>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: 'view',
props: ["store"],
data:function(){
return {}
}
};
</script>
now when i try to render it like below
<div>
<b-modal ref="my-modal2" hide-footer title="Store Details" class="mt-5">
<view :store='curStore'/>
</b-modal>
</div>
it gives me this result
any suggestion on whats going wrong? thanks in advance
my app mounted using following code
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
You have to import your component and add it to components as well.
Check the Vue documentation:
https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration
import ComponentA from './ComponentA.vue'
export default {
// ...
components: {
ComponentA
},
// ...
}
There are nuances for older JavaScript versions. Check the above mentioned link for details.

Where to import component in Vue?

New to Vue, working off a scaffolded project from the command line. Currently I have:
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home
from '../components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
// default styles are here
}
</style>
And home.vue
<template>
<chart-component></chart-component>
</template>
// rest of home
I am trying to create and import chart-component.vue to use inside home.vue but not sure where to import it at. I've tried adding it in main.js and App.vue unsuccessfully.
chart-component.vue
<template>
<div>
<h1>Testing Chart Component</h1>
</div>
</template>
<script>
export default {
name: 'chart',
data() {
return {
}
}
}
</script>
This seems like a simple problem but unsure how to solve it. My best guess was importing it inside App.vue and adding a components { ChartComponent } underneath the name. Second attempt was importing it into main.js and putting ChartComponent inside components: { App, ChartComponent }.
I would rename your component to ChartComponent from chart-component, as the dash is not a supported character. Vue will properly convert the name to dashes as needed, but when you're searching your code for components, it helps to have consistent names.
anyway. for using a component, you need to import it and define it first
home.vue:
<template>
<ChartComponent></ChartComponent>
</template>
<script>
import ChartComponent from './ChartComponent';
export default {
components: {
ChartComponent
}
}
</script>
Got it to work. Since I only need it locally inside the home.vue component I imported it inside there under data I added
components: {
'chart-component': ChartComponent
}
Importing component becomes much easier in Vue 3 script setup SFCs
<script setup>
import ChartComponent from './components/ChartComponent.vue'
</script>
<template>
<ChartComponent />
</template>

Vue - Using component inside other component

I am trying to use a search-bar component inside my home.vue component but I can't figure out why its not working.
Folder structure
App.vue
components
home.vue
query.vue
common
HeaderBar.vue
SideBar.vue
SearchBar.vue
App.vue
script
import HeaderBar from './components/common/HeaderBar'
import SideBar from './components/common/SideBar'
export default {
name: 'App',
components: {
HeaderBar,
SideBar
},
html
<template>
<div id="app">
<HeaderBar></HeaderBar>
<SideBar></SideBar>
<main class="view">
<router-view></router-view>
</main>
</div>
</template>
This above works just fine.
Home.vue
script
import SearchBar from './common/SearchBar'
export default {
name: 'Home',
components: SearchBar
}
html
<template>
<section class="home">
<div class="hero-content">
<h1>Hello World</h1>
<SearchBar></SearchBar>
</div>
</section>
</template>
I get those errors:
[Vue warn]: Invalid component name: "_compiled". Component names can
only contain alphanumeric characters and the hyphen, and must start
with a letter.
[Vue warn]: Invalid component name: "__file". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> <Home> at src\components\Home.vue
<App> at src\App.vue
<Root>
By default you have to use it with kebab-case in template tag.
Register component as of PascalCase notation. Use it in component with kebab-case notation. Simple as that!
Case 1 : Default
<template>
<section class="home">
<div class="hero-content">
<h1>Hello World</h1>
<search-bar></search-bar>
</div>
</section>
</template>
<script>
import SearchBar from './common/SearchBar'
export default{
components: SearchBar
}
</script>
Case 2 : Customized
Or you want to register it with your way(by applying custom name) just change this code :
export default{
components: {
'search-bar' : SearchBar
}
}
UPDATE: This answer was provided in reference to vue version 2.x. I am unaware of vue 3.x and haven't read 3.x docs. You can always submit an edit draft for vue 3.x compatible solution. Thanks!
Script of Home.vue should be like following
import SearchBar from './common/SearchBar'
export default {
name: 'Home',
components: {
'SearchBar': SearchBar
}
}
If you SearchBar component already have a name property values SearchBar, the 'SearchBar' filed name is not required.
May or May not help you, but I did a silly mistake: as
import ServiceLineItem from "#/Pages/Booking/ServiceLineItem";
export default {
components: ServiceLineItem,
};
As it should be like :
import ServiceLineItem from "#/Pages/Booking/ServiceLineItem";
export default {
components: {
ServiceLineItem,
},
};

Vue.js doesn't render components

I am using Vue.js and I want to try to render components but it isn't working
main.js:
import Vue from 'vue';
import 'bulma';
import Navbar from './Navbar.vue';
Vue.component('navbar', Navbar);
const MyC = Vue.component('myc', {
template: '<h1>Are you working?</h1>',
});
const root = new Vue({
el: '#app',
components: {
Navbar, MyC,
},
});
index.html
<body>
<div id="app">
<navbar></navbar>
<myc></myc>
</div>
<script src="dist/build.js"></script> <!-- Webpack endpoint -->
</body>
Navbar.vue
<template>
<h1>HELLO FROM NAVBAR</h1>
</template>
<script>
// Some logic here
export default {
name: 'navbar',
};
</script>
I coded as written in guide but neither of the ways to render a component is working
I just have blank page
I am using webpack+vue-loader
[UPDATE]
It works without components imports just rendering template
[UPDATE 2]
Got this message
[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
move your code from index.html to app.vue, index.html is a html file but not a vue file
try it , now it will be work , happy life.
//main.js
import Vue from 'vue'
import App from './App'
Vue.component('myc', { //gobal components
template: '<h1>Are you working?</h1>',
})
new Vue({
el: '#app',
template: '<App><App/>',
components: {
App
}
})
//index.html
<body>
<div id="app">
</div>
<script src="dist/build.js"></script>
</body>
//app.js
<template>
<div class="app">
<navbar></navbar>
<myc></myc>
<div
</template>
<script>
import navbar from 'path of Navbar.vue' //local components
export default {
name: 'app',
component:{
navbar
}
}
</script>
I've moved everything to App.vue
render: h => h(App) worked for me

Categories