I am trying to learn Vue 2 framework and I am stuck with this error. I have the following scripts responsible for the functionality of my application:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'
import Posts from './components/Posts.vue'
import Routes from './routes/routes'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VueResource)
const router = new VueRouter({
routes: Routes
})
new Vue({
el: '#app',
router: router,
render: h => h(App)
})
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Posts from './components/Posts.vue'
export default {
name: 'app',
components: {
Posts
}
}
</script>
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
Posts.vue
<script>
import Vue from 'vue'
window.addEventListener('load', function () {
new Vue({
el: '#root',
data: {
message: 'Hello World!'
}
})
})
</script>
Those scripts are included at the end of the page. Important to mention that the div with id value of 'app' is empty. I am also new to webpack, so I would assume, that there's a problem with my imports and exports, but unfortunately I could not to resolve it myself. Index page simply contains this:
<div id="app"></div>
UPD (router.js)
import Posts from '../components/Posts.vue'
const routes = [
{ path: '/', component: Posts }
]
export default routes
In App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
The <router-view> component will show the components as per the current route.
import Posts from '../components/Posts.vue'
const routes = [
{ path: '/', component: Posts }
]
export default routes
Here it is clear that <router-view> would show the Posts component.
Posts.vue
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
<script>
import Vue from 'vue'
window.addEventListener('load', function () {
new Vue({
el: '#root',
data: {
message: 'Hello World!'
}
})
})
</script>
Flashback to the router, there is a line which says:
import Posts from '../components/Posts.vue'
this is the import default syntax but what has been exported by Posts.vue ? Hence, there is nothing imported to the router. Hence, nothing rendered inside the #app.
Also, posts doesn't have to be a new Vue(...) instance.
<template>
<div id='root'>
<h1>Test</h1>
<input type="text" v-model="message">
</div>
</template>
<script>
import Vue from 'vue'
export default {
data: {
message: 'Hello World!'
}
}
</script>
Will do just fine. With that, there is a default export in place for the router to use.
Related
My component information is not displayed!!!
the router is working great and I test it to many times but there is nothing in components when I run the project.
They all seem to have nothing in them buy I put lot`s of things in them.
I working with vue.js 2
and I have an error in console "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."
app.vue:
<template>
<div>
<router-link to="/">app</router-link>
<router-link to="/RoutOne">RoutOne</router-link>
<router-link to="/RoutTwo">RoutTwo</router-link>
<router-link to="/RoutThree">RoutThree</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";
Vue.use(VueRouter)
const routes = [
{ path: "/", component: App },
{ path: "/RoutOne", component: RoutOne },
{ path: "/RoutTwo", component: RoutTwo },
{ path: "/RoutThree", component: RoutThree },
]
const app = new Vue({
router: new VueRouter({
routes
}),
component: app
}).$mount('#app')
component one:
<template>
<div >
<h1>someone you loved</h1>
<title></title>
<button>nothing</button>
<input disabled placeholder="nothing"/>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
component two:
<template>
<div >
<h1>loving you is a losing game</h1>
<h2>the title is : {{title}}</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
component three:
<template>
<div >
<h1>and way down we go</h1>
<b-alert>wrong side</b-alert>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Just add mode: 'history' to your router, by default vue-router use hash mode, it uses a hash character (#) before the actual URL is internally passed.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";
Vue.use(VueRouter)
const routes = [
{ path: "/", component: App },
{ path: "/RoutOne", component: RoutOne },
{ path: "/RoutTwo", component: RoutTwo },
{ path: "/RoutThree", component: RoutThree },
]
const app = new Vue({
router: new VueRouter({
mode: "history",
routes,
}),
component: app
}).$mount('#app')
Here's my set up:
This is the parent "Welcome.blade.php" set up. I'm including the relevant information since the file is pretty long:
<div id='app'>
<router-view></router-view>
</div>
<script src="{{asset('js/app.js')}}"></script>
Here is the app.js file:
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
const app = new Vue({
el: '#app',
router,
});
Here is the routes.js file:
let login= require('./components/auth/login.vue').default
let register= require('./components/auth/register.vue')
const routes = [
{path: '/', component: login},
{path: '/register', component: register}
]
export default routes;
The Login.vue component is this:
<template>
<h1>Login page</h1>
</template>
<script>
</script>
<style scoped>
</style>
Register component is the same except instead of "Login page" it's "registration page." My question is, why doesn't the component render? I'm using laravel 8 and I've already installed Vue-router. Can anyone please help a newb?
I'm trying to get basic routing going in Vue. I include 3 file listings that are faulty somewhere. If I include in app.vue I get the foo component in the browser. If I do as indicated in the code below with I get:
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Foo from './components/Foo';
Vue.use(VueRouter);
Vue.config.productionTip = false
const router = new VueRouter({
routes: [
{ path: '/', component: Foo }
],
mode: 'history'
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
import Foo from './components/Foo'
export default {
name: 'app',
components: {
Foo,
},
}
</script>
Foo.js
<template>
<div class="hello">
<h1>string happens</h1>
</div>
</template>
<script>
export default {
name: 'Foo',
}
</script>
You are getting the error because you are importing Foo inside App.vue, but you are not using it there. Simply remove that import and the error will go away.
The answer is to change the app.vue code as below. not easy as a newby:-(
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
im creating a small site using vue.js, im trying to setup a vue-router(which hasn't worked at all so far). im getting the "Cannot redefine property: $router" error.
here is my code.
App.Vue
<div id="app">
<div class="header">
<div class="tab">
<router-link to="/page1">page1</router-link>
</div>
<div class="tab">
<router-link to="/page2">page2</router-link>
</div>
<div class="tab">
<router-link to="/page3">page3</router-link>
</div>
<div class="tab">
<router-link to="/page4">page4</router-link>
</div>
</div>
<div>
<router-view></router-view>
</div>
Page1.vue
<template>
<div>
<h3>sup</h3>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'hello world'
}
}
}
</script>
<style>
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
new Vue({
el: '#app',
render: h => h(App)
})
const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }
const routes = [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page1 }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router
}).$mount('#app')
index.html
<!DOCTYPE html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello-world</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
ive worked with vue-router before and ran into this problem. i feel like im missing something but i dont know what, any help will be greatly appreciated
You have duplicate your Vue instance.
Check this.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }
const routes = [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page1 }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')
Your main Vue instantiation is duplicated:
new Vue({
el: '#app',
render: h => h(App)
})
and:
const app = new Vue({
router
}).$mount('#app')
I think this is the source of the problem. I suppose it can look like this:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }
const routes = [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page1 }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')
I try use vue-router, but something went wrong.
On page rendered router-link, by click url changed. localhost/#/ -> localhost/#/contacts but component steal main page. Update only if page reload.
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: Routes
});
window.onload = () => {
new Vue({
router: router,
el: '#app-container',
data: {
currentRoute: window.location.hash.split('#')[1]
},
computed: {
ViewComponent () {
return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
}
},
render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
});
}
route.js
const routes = [
{path: '/', component: mainPage},
{path: '/example1', component: examplePage},
{path: '/example2', component: exampleForm},
{path: '/contacts', component: contacts}
];
export default routes
index.vue
<template lang="jade">
div(id="app")
router-link(to="/example1") Example1
br
router-link(to="/example2") Example2
br
router-link(to="/contacts") Contacts
</template>
<script type="text/javascript">
export default {
}
</script>
I fix problem by add
watch: {
'$route'(to, from) {
this.$router.go(this.$router.currentRoute)
}
}
for main.js, but i think this is very bad solution.
you are missing router-view. this is the component responsible to render the component that the router needs to display
please consider this code structure based on official boilerplate:
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
index.vue
<template>
<div id="app">
<router-view/>
<router-link to="example1">example1</router-link>
<router-link to="example2">example2</router-link>
</div>
</template>
index.js (like your route.js)
import Vue from 'vue'
import Router from 'vue-router'
import example1 from '#/components/example.vue'
import example2 from '#/components/example2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/example-1',
name: 'example-1',
component: example1
}
{
path: '/example-2',
name: 'example-2',
component: example2
}
]
})