Trying to import some routes for a Vue3, VueRouter instance in Laravel9, Vite only receive the above error. Here's my config:-
package.json
"dependencies": {
"vue": "^3.2.45",
"vue-router": "^4.1.6",
"vuex": "^4.1.0"
}
resources/js/routes.js
module.exports = [
{
path: '/',
name: 'posts.index',
component: () => import('./routes/Posts/Index.vue')
},
{
path: '/post/:slug',
name: 'posts.show',
component: () => import('./routes/Posts/Show.vue')
}
]
resources/js/app.js
import './bootstrap';
import * as Vue from 'vue';
import * as VueRouter from 'vue-router';
import * as Vuex from 'vuex';
import * as routes from './routes';
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: routes
// routes: import('./routes.js')
})
help
Related
I need to redirect to login page if backend throws 401-Unauthorised error. But when I try to use router.push('/login) it throws router is not defined error in axios interceptor.
Here is my axios.js file.
import Vue from 'vue'
import axios from "axios"
import router from '../router'
_axios.interceptors.response.use(
function(response) {
return response
},
function(error) {
if(error.response.status == 401){
router.push('/login')
}
return Promise.reject(error)
}
)
This is router.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
name: 'Login',
meta: {
layout: 'login',
requireAuth: false,
icon: null
},
component: () => import(/* webpackChunkName: "login" */
'../components/common/auth/login-form'),
}]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
And defining {router} in axios gives this error in terminal npm run serve:
If I try with import router from '../router' in axios file I got this error:
use default export import router from '../router' instead of named import like you have in answer, `cause you have default export only in file where you define router
I’m using vue-router version "^4.0.13". when I want to run (npm run watch) the following errors occur
WARNING in ./resources/js/app.js 7:8-17 export 'default' (imported as
'VueRouter') was not found in 'vue-router'
My project files are
app.js
require("./bootstrap");
window.Vue = require("vue").default;
import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "./routes";
Vue.use(VueRouter);
Vue.component(
"employees-index",
require("./components/employees/Index.vue").default
);
const router = new VueRouter({
mode: "history",
routes: routes
});
const app = new Vue({
el: "#app",
router: router
});
routs.js
import EmployeesIndex from "./components/employees/Index";
import EmployeesCreate from "./components/employees/Create";
import EmployeesEdit from "./components/employees/Edit";
export const routes = [
{
path: "/employees",
name: "EmployeesIndex",
component: EmployeesIndex
},
{
path: "/employees/create",
name: "EmployeesCreate",
component: EmployeesCreate
},
{
path: "/employees/:id",
name: "EmployeesEdit",
component: EmployeesEdit
}
];
A have some problem in laravel 9 - empty page. Console have not any error or warrnings.
"vue": "^3.2.33",
"vue-loader": "^17.0.0"
Thanx a lot!
require('./bootstrap');
import {createApp} from 'vue'
import {createRouter} from 'vue-router'
const router = createRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
import App from './components/App'
import Hello from './components/Hello'
import Home from './components/Home'
let app = createApp(App)
app.use(router).mount("#app")
Without prescribing a router, everything works. I don't understand where the error is during the initial setup Vue Router.
So I deploy this app in my server using sub directories like MyServer.com/vue/.
Inside my App.vue only show <router-view />, on local this application runs smoothly, and there is no error on console.
App.vue:
<template>
<router-view/>
</template>
<script>
export default { };
</script>
<style></style>
route.js:
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: "/",
name: "Home",
component: () => import("../views/Home.vue"),
redirect: "/dashboard",
children: [
// Children routes
],
},
{
path: "/login",
name: "Login",
component: () => import("../views/Login.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
mode: 'hash',
});
export default router;
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./route";
import ElementPlus from "element-plus";
import { Chart, registerables } from "chart.js";
import "element-plus/dist/index.css";
import "./styles/index.scss";
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.use(Chart.register(...registerables));
app.mount("#app");
Thank you for reading this question.
I got a syntax error, but I can't find where.
I am using Vue.js & bootstrap, I am working on shopping cart functionality. In order for endpoints to work you need to pass a special authentication header:
Authorization: kazuhisa.noguchi.ghsd75#gmail.com
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import MainPage from './components/MainPage.vue'
import HelpPage from './components/HelpPage.vue'
import ProductPage from './components/ProductPage.vue'
import CategoryPage from './components/CategoryPage.vue'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/',
component: MainPage
},
{
path: '/help',
component: HelpPage
},
{
path: '/products/:productId',
component: ProductPage
},
{
path: '/categories/:categoryAlias',
component: CategoryPage
}
],
mode: 'history'
})
axios.defaults.headers.common['Authorization'] = 'azuhisa.noguchi.ghsd75#gmail.com';
axios.post("https://euas.person.ee/user/carts/").then(
response => {
new Vue({
render: h => h(App),
router: router,
data: {
cart: response.data,
saveCard() {
axios.put("https://euas.person.ee/user/carts/" +
this.cart.id, this.cart)
}
}
}).$mount('#app')
}
};
All my best,