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 }
});
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 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 learning Vue.js and it's been really awesome so far but I ran into a problem trying to add another JS file. I have a Navigation.vue file and I'm trying to add a new Vue instance to corrsponde with it, but I'm not having any success.
Navigation.js
new Vue({
el: '#navigation',
data: {
active: 'home'
},
methods: {
makeActive: function(item) {
this.active = item;
}
}
});
Navigation.vue
<template>
<div id="navigation">
<nav v-bind:class="active" v-on:click.prevent>
Home
Projects
Services
Contact
</nav>
</div>
</template>
<script>
export default {
}
</script>
Application.js
import Vue from "vue/dist/vue.esm"
import App from '../app.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('app'))
const app = new Vue({
el: 'app',
template: '<App/>',
components: {
App
}
})
console.log(app)
})
The Navigation.js file isn't working. I think it's because I haven't imported it right, but I'm not sure?
ERROR:
Property or method "active" 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
What I'd expect to see is your Navigation component included in your App component.
App.vue
<template>
<div>
<Navigation/>
<!-- there's probably more than just this -->
</div>
</template>
<script>
import Navigation from 'path/to/Navigation.vue'
export default {
// snip
components: {
Navigation
}
// snip
}
</script>
Also, component data should be a function
Navigation.vue
<script>
export default {
data () {
return { active: 'home' }
},
methods: {
makeActive (item) {
this.active = item;
}
}
}
</script>
There's no need to include Navigation.js or have a separate Vue instance for your Navigation component