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
Related
import { createRouter, createWebHistory } from 'vue-router';
import about from './views/web/AboutPage.vue';
import support from './views/web/SupportPage.vue';
import iatiStanderd from './views/web/IatiStandard.vue';
import publishingChecklist from './views/web/PublishingChecklist.vue';
import { def } from '#vue/shared';
const routes = [
{
path: '/iati-standard',
name: 'iatiStanderd',
component: iatiStanderd,
},
{
path: '/support',
name: 'Support',
component: support,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
I have set up routes like this.
app.use(router);
and registered like thi in app.ts file
<router-link to="/iati-standard">IATI STANDARD</router-link>
and tried to use route like this.
the url changes but desired component is not rendered. where did i go wrong?
I am using vue with laravel
you should use the name instead of the URL.
In your case:
<router-link :to="{ name: 'iatiStanderd'}"> ... </router-link>
And btw, take care for the name it is iatiStandard not iatiStanderd 🙂
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?
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.
When reloading my single page application, I would like the url to load correctly instead of throwing a 404 error. Using Laravel 5.6, Vue.js 2.6, & MAMP.
I have tried the following code, however, I am loading different app.js files in the same welcome view based on what the URL is. Because of this structure,, this solution is not working:
Route::get('/{vue_capture?}', function () {
return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');
I would like to have refresh work with my vue router. Any suggestions, either having to do with my routes/web.php file or .htaccess file is appreciated.
Note: This .htaccess file configuration was not working for me (apache):
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
//welcome blade
<div id="app">
<app></app>
</div>
<script src="{{ asset($app_path) }}"></script>
//app.vue
<div class="container-fluid px-0">
<router-view/>
</div>
Well, as far I can see, your approach was good. You are capturing all GET requests, and passing them to your Blade view.
My suggestion:
Cleaner route:
Route::get('/{any}', 'YourController#index')->where('any', '.*');
Your app.js (main JS file should look something like this):
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import About from './views/About'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
With all this configuration and your router-view, you should be fine.