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),
});
Related
I have Vuetify installed in my Laravel project but none of the v- classes are working. There are no errors in the console though. Here is the app.js file:
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify'
Vue.use(Vuetify);
Vue.component('container-component', require('./components/ContainerComponent.vue').default);
Vue.component('index-component', require('./components/IndexComponent.vue').default);
const vuetify = new Vuetify();
const app = new Vue({
el: '#app',
vuetify
});
and an example component which vuetify isn't being applied to:
<template>
<v-btn>BUTTON</v-btn>
</template>
<script>
export default {
name: "IndexComponent"
}
</script>
<style scoped>
</style>
I just was using a single button to test if it was working.
When you create your Vue istance you must create a new istance of Vuetify also.
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
I suggest you also to add this after importing Vuetify:
import 'vuetify/dist/vuetify.min.css'
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 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 want to use vue.js with vue-router, but the onclick doesn't work.
in App.vue:
<template>
<div id="app">
<hello></hello>
<router-view></router-view>
</div>
</template>
<script>
import hello from './components/hello/Hello.vue'
export default {
name: 'app',
components: {
hello
}
}
</script>
<style>...</style>
If I connect Hello.vue like above, I can't use onclick event (maybe another too, I can't try). After click on the button nothing happens.
but if I connect Hello.vue in router:
main.js ↓
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import hello from './components/hello/Hello.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
Vue.use(VueRouter);
const routes = [
{
path: '/hello',
name: 'hello',
component: hello
},
];
var router = new VueRouter({
mode: 'history',
base: __dirname,
routes
});
const app = new Vue({
router
}).$mount('#app');
then the button works! How I can use components not in router. For example change Hello.vue to topMenu.vue. I want use menu on all pages on site, but I don't want duplicate menu in each page component, it's not DRY!
I found the answer. It was so easy, in my code I just replaced:
const app = new Vue({
router
}).$mount('#app');
with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
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 }
});