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
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 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");
I have an existing project where I would like to add one vue component. But I don't want to transform the whole website into a Vue application - just add some components on the page. But I want to be able to use Single File Components and webpack.
It works if I do it like this with a CDN.
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>Static div</div>
<my-component></my-component>
</div>
<script type="module">
import MyComponent from './MyComponent.js'
new Vue({
el: '#app',
components: { MyComponent },
})
</script>
</body>
</html>
But if I try to do it using .vue single file components and webpack then it is not working. It replaced my #app div with the following:
< -- function(e,n,r,o){return He(t,e,n,r,o,!0)} -->
index.js
import Vue from 'vue';
import MyComponent from './MyComponent';
new Vue({
el: '#app',
components: { MyComponent },
});
But if I add a render function then it works but in this case it replaces my div#app with the App component. I did not want that. I just wanted to add some components to my div#app like I did with CDN.
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App),
});
Can you do this then?
<div id="app">
<div>Static div</div>
<div id="vueApp"></div>
</div>
import Vue from 'vue';
import App from './App';
new Vue({
el: '#vueApp',
render: h => h(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'm creating a Laravel website that will be a single page application. I'm new to VueJS even if I have experience with javascript in general.
I need to display several routes, such as /blog/new, /blog/:id, /blog/edit, etc. /blog itself is defined by Laravel, and works as the blog index.
I installed vue-router, and tried to follow some examples I saw but nothing happens:
app.js
import './bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
const blogIndex = { template: require('./components/blog/index.vue') };
const blogNew = { template: require('./components/blog/new.vue')};
const routes = [
{
path: '/blog',
component: blogIndex,
name: 'blog-index'
},
{
path: '/blog/new',
component: blogNew,
name: 'blog-new'
}
];
const router = new VueRouter({
routes,
mode: "history"
});
Vue.use(VueRouter);
Vue.component('example', require('./components/Example.vue'));
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('blog_index', require('./components/blog/index.vue'));
console.log(testvar);
const app = new Vue({
router
}).$mount('#app');
components/blog/index.vue
<template>
<div>
<h1>Blog index</h1>
<router-link :to="{ name: 'blog-new' }">New article</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
mounted() {
console.log('blog#index mounted');
}
}
</script>
components/blog/new.vue
<template>
<h2>Here is blog/new y'all</h2>
</template>
<script>
export default {
mounted() {
console.log('blog#new mounted');
}
}
</script>
So far, the only thing that works is my address bar that gets modified, but the template itself doesn't seem to be loaded (I go from /blog to /blog/new).
I've seen that I need add <router-view></router-view> in my html file, but this triggers an error and blocks VueJS's display.
My question is: what am I missing, or what did I do wrong?
Thank you in advance
You need to use <router-view></router-view> in your main App.vue file, which is the part that new routes are loaded into.
<template>
<router-view></router-view>
</template>
You currently state you have this in components/blog/index.vue - which I believe is just for your nested routes. https://router.vuejs.org/en/essentials/nested-routes.html