My components vue files are in src/components/ while my index.js router file (whose content is down below) is in src/router/.
Why do I get "Error: Can't resolve './components/App.vue'" error?
import Vue from 'vue';
import App from './components/App.vue';
import SignUp from './components/SignUp.vue';
import Login from './components/Login.vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: App
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: 'signup',
name: 'SignUp',
component: SignUp
},
]
});
If your index.js is on src/router/ and your components are in src/components they are not in the same folder. So, for correctly import, you must put ../ to reference one level down to /src/.
It would look like this:
import Vue from 'vue';
import App from '../components/App.vue';
import SignUp from '../components/SignUp.vue';
import Login from '../components/Login.vue';
./ doesn't have a special meaning other than current folder as a relative path; With a folder structure as:
|-src
|-components
|-App.vue
|-router
|-index.js
You could either use ../ which backup one level from the current path:
import App from '../components/App.vue';
Or use # which refers to the src folder:
import App from '#/components/App.vue';
Related
I am a newbie when it comes to vue. So I followed this tutorial
https://www.youtube.com/watch?v=WLQDpY7lOLg&ab_channel=TheCodeholic . In which I am in the "adding view router" section.
I did what all the changes and add on's he made (from creating the views folder & components and creating the router folder and its inside index.js and even the imports) yet when I try to npm run dev, there is nothing on my website.
here is my code from the router folder:
import {createRouter , createWebHistory} from 'vue-router'
import Dashboard from "../views/Dashboard.vue"
import Login from "../views/Login.vue"
import Register from "../views/Register.vue"
const routes = [
{
path: '/',
name: 'Dashboard',
component: Dashboard
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
a code from my views/Dashboard.vue
<template>
<h1> Dashboard </h1>
</template>
<script>
export default {
name: 'Dashboard'
}
</script>
<style scoped>
</style>
and from my main.js
import { createApp } from 'vue'
import './style.css'
import store from './store'
import router from './router'
import './index.css'
import App from './App.vue'
createApp(App).mount('#app')
createApp(App).use(store)
createApp(App).use(router)
Here is a photo of when I run npm run dev
enter image description here
I can't seem to see what is wrong even though I checked up multiple times. Please help :<
here is what I expected to actually happen
enter image description here
Error looks to be here
createApp(App).mount('#app')
createApp(App).use(store)
createApp(App).use(router)
mount() should go last. From the Vue docs:
The .mount() method should always be called after all app configurations and asset registrations are done.
You can also optionally chain everything together like so:
createApp(App).use(store).use(router).mount('#app')
Which if you're using typescript, can then actually catch your error in your IDE beforehand
I have a Vue project I'm building on, following a tutorial. This project uses Vue Router and I am trying to use Bootstrap. This is the current layout:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/movie/:id',
name: 'Movie Detail',
component: MovieDetail
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
I've tried changing the following in Main.js to initialise Bootstrap:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { BootstrapVue} from 'bootstrap-vue'
createApp(App).use(router, BootstrapVue).mount('#app')
I am getting the warning: ""export 'default' (reexported as 'Vue') was not found in 'vue'". What do I need to do in order to get BootStrap working?
You can use bootstrap by linking bootstrap css in head blocks in
'index.html' which file is located on the root directory of your project.
And make sure that 'bootstrap.min.css' file is located on the static folder
<link rel="stylesheet" href="/static/bootstrap.min.css" />
I want to use routing in my vue project, but don't register many components globally, I am having trouble here.
My project uses vue-cli and vue-router
My project idea is to register these subcomponents only in the parent component that uses the corresponding subcomponent, but I want to use routing to control the presentation of these components.
My code is as follows
Main.js
import Vue from "vue";
import App from "./App";
import VueRouter from 'vue-router'
import test from "./components/test.vue"
Vue.use(VueRouter)
Vue.config.productionTip = false;
const routes = [
{
path: '/test', component: test,
}
]
const router = new VueRouter({routes: routes});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div>
<main-layout>
<router-view></router-view>
</main-layout>
</div>
</template>
<script>
import MainLayout from "./components/MainLayout.vue"
import test from "./components/test.vue"
export default {
components: {
"main-layout": MainLayout,
"test": test
},
name : "app",
data(){
return {
collapsed: false,
}
},
}
</script>
Just like the code above, I have to register every component that needs to be managed by routing in main.js and app.vue. These are cumbersome and the code is not beautiful. Is there any way or plugin to solve this problem?
You can move all the routing code to a different folder (possibly named router).
Inside the folder you can have a file called index.js that builds the router and move individual routing components to different files.
Each router component should only return router information and not a router object.
You'll still need to import individual vue components, but they'll be scattered across multiple files. This should make things tidier.
In your main.js will need to import the router, something similar to this
import router from './router'
....
Vue.use({
router
})
This is a possible folder structure for your router:
This is part of router/index.js that shows how to use routes defined in other files
import Vue from 'vue'
import Router from 'vue-router'
import API from '#/api'
import DashboardRoutes from './dashboard'
import CustomerRoutes from './customer'
import MaintenanceRoutes from './maintenance'
import DashboardStudioRoutes from './studio'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/api',
name: 'Api',
component: Api
},
DashboardStudioRoutes,
DashboardRoutes,
CustomerRoutes,
MaintenanceRoutes,
{
path: '*',
name: '404',
component: NotFound
},
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
I am developing a web page in vuejs and I am using webpack 4 and babel 6 for compiling the assets
When i put something like... route('home', '/', () => import('../pages/home.vue')) the compiler says me Support for the experimental syntax 'dynamicImport' isn't currently enabled and I cant use that syntax
I need help, thanks
This is my package.json:
https://gist.github.com/sarmanulco/fd2415c2b81db3df457302c61d77f197
To use vue-router with lazy-loading component:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'homepage',
component: () => import('#/pages/Home.vue') //lazy loading
},
]
})
Make sure you take a look at vue-router docs
To use the dynamicImport add a .babelrc file (where the package.json is located)
Here is the content of the .babelrc:
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
I am using vue.js version 2.5.13 installed with the vue-cli using the webpack-template.
Now I would like to use the generated App.vue-template for all my public pages and another template AdminApp.vue for all my admin-routes.
My router/index.js is like this:
import Vue from 'vue'
import Router from 'vue-router'
import LandingPage from '#/components/LandingPage'
import AdminDashboard from '#/components/admin/AdminDashboard'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'LandingPage',
component: LandingPage
},{
path: '/admin/dashboard ',
name: 'AdminDashboard',
component: AdminDashboard
}
}
My main.js is like this:
import Vue from 'vue';
import App from './App.vue';
import AdminApp from './AdminApp.vue';
import router from './router';
if (window.location.href.includes('/admin/')) {
new Vue({
el: '#app',
router,
components: {AdminApp},
template: '<AdminApp/>'
});
} else {
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});
}
Now if I go to localhost:8080/#/ and then via url to localhost:8080/#/admin/dashboard the admin-panel does not use the AdminApp.vue-Template but the App.vue-Template. If I refresh this page, it works.
Do you know why? Are there some best practices for using two or more different templates for different routes?
In Brief:
You should make your layouts.For example layout1 & layout2.
Then you should define them as global component in your main.js and finally use them with v-if in your app.vue depends on your condition.
With Detail:
first in router/index.js:
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/auth/login',
name: 'login',
meta:{layout:"auth"},
component: Login
},
which first route will render with admin layout and second one render with Auth layout for example.
Now in main.js we will define layouts as component:
import Admin from './Layouts/Admin.vue'
import Auth from './Layouts/Auth.vue'
Vue.component('Admin',Admin);
Vue.component('Auth',Auth);
Then in App.vue we check meta datas that passed from routes to detect which layout needs:
<Auth v-if="this.$route.meta.layout==='auth'"/>
<Admin v-if="this.$route.meta.layout==null"/>
Ok.All thins done!
Now we have two layout.