My error:
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.
my main.js file:
import Vue from 'vue'
// import App from './App.vue'
import VueRouter from 'vue-router'
import Search from './components/Search'
import Index from './components/Index'
Vue.config.productionTip = false;
const routes = [
{path: '/', component: Index},
{path: '/Search', component: Search}
];
const router = new VueRouter({
routes
});
new Vue({
router
}).$mount('#app');
my components are mostly identical, looking like this:
<template>
index
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
I am sure I am doing something wrong that is very simple, but I have spent a few fruitless hours attempting to find a solution and I haven't found one.
I used the default vue-cli create, and am unsure how to make this work. I have tried to resolve the dist version of vue as has been recommended, but I haven't found any way to actually do that.
Perhaps I am writing my components incorrectly? Any help would be greatly appreciated. Thank you very much
Related
I have tried to access to others pages via url, but those pages never loads
http://localhost:8080/index
http://localhost:8080/about
This is my main.js file
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index';
const About = { template: '<p>about page</p>' }
const routes = [
{ path: '/index', name: 'index', component: Index },
{ path: '/about', name: 'about', component: About }
]
var router = new VueRouter({
routes: routes,
mode: 'history'
})
new Vue({
router: router,
vuetify,
render: h => h(App)
}).$mount('#app')
Does anyone can help me with vue-router? i am new in this framework
Does it work if you access them like this:
http://localhost:8080/#/about
If yes, your vue-router is working in the default hash-mode. To get rid of the hash and get "normal" URLs you'll need to set it to history mode.
Edit:
As I see you're already using history mode. Do you use Vue CLI for local development? This should normally work out of the box. If not, you need to setup some redirect rules on other web servers. Please see the examples here: Example Server Configurations
Edit 2:
Can you show your App component?
I tried to reproduce your problem in a sandbox, but it works: https://codesandbox.io/s/confident-voice-zyg07
The App component here looks like this, including the router-view:
<template>
<div id="app">
<router-view id="page"/>
</div>
</template>
<script>
export default {
name: "App",
components: {}
};
</script>
I have created a new project using vue-cli 'vue init webpack-simple my-app' command. In that fresh installation copy, I'm trying to import vue-router in the App.vue component that was created by default. But it is giving me an error: 'Uncaught ReferenceError: Vue is not defined'. If I import the vue again in App.vue, then the app is working fine. But I already imported the vue in main.js, so why do I need to import it again in App.js? Is there any way I can use the imported vue from main.js? Here is my code:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'; //**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
</script>
<style lang="scss">
</style>
Is there any way i can use the imported vue from main.js?
No, you need to import it in every file that uses Vue. The imports/requires are how things get hooked up. Rest assured, each import will be the same singleton instance.
You can get to the router from a Vue component's javascript using this.$router and this.$route without an import, or inside a template, using simply $router and $route
Not recommended, but you can assign Vue to a global in main.js, and use the global without importing.
main.js
import Vue from 'vue';
global.MyVue = Vue
App.vue
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
Why
This is how ES6 links things up. Consider it wiring. If there were more than 1 Vue lib available, how would the linker know which to use? What if another library defined a variable or function called Vue? Perhaps a lib uses its own internal Vue for an event bus or other feature.
Other Thoughts
The explicit import also makes IDE autocompletion and syntax highlighting work better. Some IDEs can add the imports automatically, and that makes life easier.
did you try this ?
import Vue from 'vue'
import VueRouter from 'vue-router'
then use
Vue.use(VueRouter)
because the error message means you need to import vue first to use vue-router
You did the right thing and you don't have to worry about importing Vue in multiple files. When you are shipping your application and build it for production, you will have only one "Vue import". If you take a look at dist folder and your bundled .js files you will notice that Vue is imported only once.
I use Vue 2 in CLI mode with webpack-simple. I have following files:
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router: router,
});
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './Loader.vue';
export default {
name: 'app',
}
</script>
<style lang="scss">
</style>
routes.js:
import Game from './components/Game.vue';
import Login from './components/Login.vue';
export default [
{ path: '/', component: Game, name: "Game" },
{ path: '/login', component: Login, name: "Login" },
]
Game.vue and Login.vue looks the same:
<template>
<div>
Game
</div>
</template>
<script>
export default {
name: 'game',
}
</script>
<style lang="scss">
div {
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
unfortunately starting a file gives me an error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
Also router-view tag is not changed to proper html. I use vue router for the first time. It' been installed via npm in version 3.0.1
Any advice?
You need to do the following:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
Ref: https://router.vuejs.org/en/installation.html
new Vue({
el: "#app",
router: router,
render: h => h(App),
})
Hope it will help you
Change:
Vue.use('VueRouter');
To:
Vue.use(VueRouter);
i dont know if its related to your problem or not but you have to use the VueRouter variable "Vue.use(VueRouter)" not a string "Vue.use('VueRouter')";
I had a similar issue, running the commands below fixed it for me.
npm install
npm install vue-router
npm run dev
I had encountered a similar issue while working with Vue js and laravel.
Running these commands below solved it:
npm install vue-router
npm run dev
Make sure before creating routes and using the VueRouter you need to tell Vue.js that you are using VueRouter. Try this before using the VueRouter:
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
.....
const routes = [{
path: '/', component: Home, name: "Home"
......
}]
Good Luck
I guess the problem is occurring due to you are passing the vue-router as string in your example.
Use this instead:
import VueRouter from 'vue-router';
and then register it using Vue.use() like this :
Vue.use(VueRouter);
and as you are using es6 style import, you can also use es6 style object shorthand for router.
const router = new VueRouter({
routes: Routes,
});
new Vue({
el: '#app',
render: h => h(App),
router,
});
I cannot figure out how to set this up properly using vue-router with vue.js 2.x
I want App.vue to be a main site layout module which contains basic site level things like footer, logo, main nav, etc.
A route based architecture which will load components based on the route inside this App.vue
ie: /things to show list and /things/:id to show individual item
I'm using the webpack template from vue-cli
I'm confused about main.js vs. App.vue should I be moving the routes out of main.js into App.vue?
Can someone link to a simple hello world using layouts in vue-router?
import Vue from 'vue'
import App from './App'
import Items from './components/Items'
import Item from './components/Item'
import Axios from 'axios'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.prototype.$http = Axios
const routers = new VueRouter([
{ path: '/items/:id', component: Item },
{ path: '/', component: Items }
])
// how to specify App.vue as a layout?
new Vue({
routes
}).$mount('#app')
I think this should work for you
const app = new Vue({
router,
render: (h) => h(App)
}).$mount('#app')
or spread operator
const app = new Vue({
router,
...App
}).$mount('#app')
As I mentioned in comment, take look at the repo that I created https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app
I had wrong property name:
new Vue({
router,
...App
}).$mount('#app')
This fixes it. I had imported it as routes not router. Another way to fix would have been { router: routes } but I renamed the file to router and now everything works.
Big thanks to #belmin for hoping on screenhero to try and help me fix it!
I have an application like
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './routes.es6';
Vue.use(VueRouter);
new Vue({
router,
}).$mount('#app');
routes.es6 contains my router module:
import VueRouter from 'vue-router';
import Index from './pages/index.vue';
const routes = [
{
path: '/',
name: 'index',
component: Index,
},
...
];
export default new VueRouter({
routes,
});
This works but has one major drawback. Let's assume my index component is defined as follows
<template>
...
</template>
<script>
require(...)
export default {
...
};
</script>
Now all require and import statements are evaluated once the components are imported in the routes.es6 file and they are injected in the main app even though they should be scoped to the specific route.
How to overcome this?
It is called - LAZY LOADING
It is explained well in Vue-Router docs.
https://router.vuejs.org/en/advanced/lazy-loading.html