My Laravel 8 project was working perfectly. I switched all my code to Laravel 9 and I get the above error? My code is exactly the same. In addition I am getting a ChunkLoadError? I have tried refreshing the page, clearing my views. My app.js is as follows:
require('./bootstrap');
import { createApp } from "vue";
import * as VueRouter from 'vue-router';
import HomeComponent from "./Components/Home/HomeComponent.vue";
import NavbarComponent from './Components/Navbar/NavbarComponent.vue';
const SudokuComponent = () => import(/* webpackChunkName: "games/sudoku" */ "./Components/Games/Sudoku/SudokuComponent.vue");
const routes = [
{
name: 'home',
path: '/',
component: HomeComponent
},
{
name: 'sudoku',
path: '/sudoku',
component: SudokuComponent
}
];
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes,
});
const app = createApp({});
app.use(router);
app.component('navbar-component', NavbarComponent);
app.mount('#app');
I can see the sudoku.js loaded in my dev tools but I keep getting the ChunkLoadError?
Related
The link would be like this: https://server/fleet/20210705001. How can I display this page when someone enters this link in address bar from anywhere. No authentication, no security, just the page needs to be opened. I have this working in local but couldn't make it work in production. Can someone help me?
This is my index.js in router folder
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Fleet from '../views/Fleet.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/feedback/:id',
name: 'Fleet',
component: Fleet,
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
next();
});
export default router
And this is my main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//import './axios-settings'
//Vue.config.productionTip = true;
createApp(App).use(router).mount('#app')
Can someone guide me?
router.beforeEach((to, from, next) => {next({ name: 'Fleet' });});
Im trying to create routing using vue-router , but I'm getting this error in vscode console:
HarmonyLinkingError: export 'onUnmounted' (imported as 'onUnmounted')
was not found in 'vue' (possible exports: default)" -t "Laravel Mix"
This is my app.js file:
import Vue from "vue";
import router from "./Router";
require("./bootstrap");
Vue.use(router);
Vue.component("home-component", require("./components/HomeComponent.vue"));
Vue.component("admin-component", require("./components/AdminComponent.vue"));
const home = new Vue({
el: "#home"
});
const admin = new Vue({
el: "#admin"
});
Whenever I open it in the browser the page is blank, and the browser console gives me this error:
Uncaught TypeError: (0 ,
vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js
And this is my router file, located in Router/indexjs :
import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
Just change few things on the router file as below
instead of importing: import { createWebHistory, createRouter } from "vue-router";
// just do this:
import Vue from 'vue'; //import again even though you already imported it
import Router from 'vue-router'; // and this is where difference comes in
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
Vue.use(Router);
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
//then you're router to export as follows
const router = new Router({routes : routes});
export default router
I am using Laravel 8 Vuejs 2.17 and VueRouter 3.4,
i have two components Orders.vue and Users.vue
this is how my app.js looks like
require("./bootstrap");
window.Vue = require("vue");
import Vue from "vue";
//? Vue router
import VueRouter from "vue-router";
import routes from "./routes";
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
router,
}).$mount("#app");
and here is how router.js looks like
import Orders from './appComponents/Orders';
import Users from './appComponents/Users';
const routes = [
{
path: "/admin/orders",
name: 'orders',
component: Orders,
},
{
path: "/admin/users",
name: 'users',
component: Users,
},
];
export default routes;
i called the routes in my laravel view like :
<router-link :to="{ name: 'users' }">users</router-link>
<router-link :to="{ name: 'orders' }">Orders</router-link>
the browser response with
[vue-router] Route with name 'users' does not exist
[vue-router] Route with name 'orders' does not exist
i also tried to call the routes by its path but still not working, anyone please can help me.
i found the solution, i've installed a an npm modules, and there was a conflict between the module app.js and my app.js
I'm using vue js with laravel api . i have defined router for forget password page in url i'm passing token . when i'm passing token then page not loading its coming not found.
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Router from 'vue-router'
import ResetPasswordForm from './pages/ResetPasswordForm'
Vue.use(Router)
const routes = [{
path: 'reset-password/:token',
name: 'ResetPasswordForm',
component: ResetPasswordForm
}]
export default new Router({
mode: 'history',
routes
})
web.php
Route::any('{slug}', function () {
return view('welcome');
});
please help me how to fixed out this issue.
I am trying to make a vue SPA using vuex, vue-router & laravel for backend. I was separating our data on our app.js to try to reduce clutter and keep our code neat. When everything on one page it works as intended, loading the routes in the router. But when we separate the code to make it more modular into: app.js, boostrap.js, routes.js, and store.js
The components aren't loading in our router-view and we are able to see our RouterLink
app.js
// Require the bootstrapper
require('./bootstrap');
// Grab imports
import Store from './store';
import Router from './routes';
// Views
import App from './views/App';
// Create the application
const app = new Vue({
el: '#heroic',
components: { App },
store: Store,
router: Router
});
boostrap.js
// Imports
import Vue from 'vue';
import Axios from 'axios';
import Swal from 'sweetalert2';
// Add to window
window.Vue = Vue;
window.Axios = Axios;
// Add Axios headers
window.Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
window.Axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
routes.js
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Hello from './views/Hello';
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
}
];
// Create the router
const router = new VueRouter({
mode: 'history',
routes: routes,
scrollBehavior (to, from, saved) {
if (saved) {
return saved;
}
return { x: 0, y: 0};
}
});
// Before every request
router.beforeEach((to, from, next) => {
});
// After every request
router.afterEach((to, from, next) => {
});
// Export
export default router;
hello.vue
<template>
<div class="row row-cards row-deck">
<div class="col-lg-4 col-md-6">
<p>Hello World!</p>
</div>
</div>
</template>
store.js
// Imports
import Vue from 'vue';
import Vuex from 'vuex';
import PersistedState from 'vuex-persistedstate';
import Cookie from 'js-cookie';
// Set use
Vue.use(Vuex);
// Create our store
const store = new Vuex.Store({
state: {
auth: [{
id: 1,
username: '',
motto: '',
rank: 1,
permissions: [],
token: ''
}],
users: [],
},
mutations:{
},
actions: {
},
getters: {
}
});
// Export
export default store;
The expected result is that when I visit the "/hello" route it would show the information that says "Hello world!" that is within the Vue file specified as the component in the routes section of the router. Instead using my Vue DevTools I get the following with no Hello world on the page.
https://i.pathetic.site/chrome_99Mbxf7f0c.png
My guess is the router is stuck waiting for the beforeEach (and also possibly afterEach) hook to be resolved. You need to call next().
Also unrelated, but if you’re using modules then you shouldn’t need to assign stuff on window.