I got a white screen in my simple demo component and I have not any idea what is wrong with my code.
Dashboard.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Hello'
}
}
}
</script>
main.js
import Vue from 'vue'
import Dashboard from './components/Dashboard.vue'
new Vue({
el: '#app',
components : {
Dashboard
}
})
Just white screen, components are not present in DOM. Vue2.X
Place this in your main.js, there's no render function in yours:
import Vue from "vue";
import Dashboard from "./components/Dashboard.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(Dashboard)
}).$mount("#app");
Related
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.
I have an app in Vue, separately is working. But if I add it into Rails, I don't know how to create a component (I have many of them, using v-for). In my standalone code is
import { createApp } from 'vue'
import App from './App.vue'
import Bar from './components/Bar.vue';
const app = createApp(App);
app.component('light-bar', Bar);
app.mount("#light-bars");
But I am unable to create component like this in Rails javascript/packs/light_bar.js.
Please, how to create a component inside Rails javascripts? My light_bar.js looks like:
import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App),
components: {
'light-bar': Bar
}
}).$mount('#light-bars');
console.log(app);
});
I also tried to import and register the component in my app, like this
import Bar from './components/Bar.vue'
export default {
name: 'App',
data() {
return {
barsData: []
};
},
components: {
'light-bar': Bar
}
...
and template looks like this
<template>
<div class="container">
<h3>Úrovně osvětlení pro různé situace</h3>
<div class="row">
<light-bar
v-for="bar in barsData"
:key="bar.id"
:luxRange="bar.luxRange"
:luxRangeName="bar.luxRangeName"
:luxLevel="bar.luxLevel"
:compensation="bar.compensation"
></light-bar>
</div>
</div>
</template>
But no component appears. Any tips what I am doing wrong?
I figured it out. But it is a little bit strange, I registered the component on both places, in packs/light-bars.js and also in my app.
import Bar from './components/Bar.vue';
export default {
name: 'App',
data() {
return {
barsData: []
};
},
components: {
'light-bar': Bar
},
...
and
import Vue from 'vue'
import App from '../light-bars/app.vue'
import Bar from '../light-bars/components/Bar.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App),
components: {
'light-bar': Bar
}
}).$mount('#light-bars');
console.log(app);
});
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>
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
I'm following the Laracasts Tutorials on Vue.js and i've hit a bit of a roadblock, i have a vueify component called app-footer.vue that contains all of my styles scripts and template.
<style>
.red {
background-color: #000;
}
</style>
<template>
<p class="footer-text">Copyright {{ currentYear }} </p>
</template>
<script>
export default {
data () {
return {
currentYear: new Date().getFullYear()
}
}
}
</script>
Then in my view i define the component as
<app-footer></app-footer>
And finally in my app.js file i import the template file and add it to my Vue instance's components list as follows
window.Vue = require('Vue');
import AppFooter from './components/app-footer.vue';
new Vue({
el: 'body',
components: { AppFooter }
});
I just keep getting Component errors asking me if i've
defined it correctly what exactly am i doing wrong?
The issue was simple, i forgot to name the component when setting it in my Vue declaration.
WRONG
new Vue({
el: 'body',
components: { AppFooter }
});
RIGHT
new Vue({
el: 'body',
components: { 'app-footer': AppFooter }
});