Problem with Voyager admin panel routing and Vue js router in laravel - javascript

I`m developing locally SPA application using Vuejs V2 in Laravel V8 framework.
My routes/web.php file have this codes:
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});
//for disallow accessing route from anywhere alse than api
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');
Auth::routes();
Here is my routes.js file inside resources/js folder
import VueRouter from "vue-router";
const routes = [
{
path: "*",
component: require("./components/PageNotFound").default,
name: "PageNotFound"
},
{
path: "/",
component: require("./components/Home").default,
name: "home"
},
// other routes
];
const router = new VueRouter({
mode: "history",
linkActiveClass: "active",
routes
});
export default router;
My problem is that i cant access Voyager http://127.0.0.1:8000/admin route in browser and redirects me to home page!
My Voyager installed successfully and before installing that i was developing frontend features so i have a lot routes in my routes.js file.
My question is how i can except Voyager admin group route in web.php or any other solutions maybe?!


I solved the problem by stopping serve then start that, worked for me and i can now see admin panel.

Related

Redirect to specific vue component from external website

I'm trying to get a link from one website, to a specific component in another external website. The external website is utilizing vue and vue-router.
Assume that the first site is running on localhost:3000, I want to redirect to localhost/#/payments.
When I try direct redirect using this snippet(in localhost:3000):
<script>
window.location.href = "http://localhost/#/payments";
</script>
Vue is opening the default component, which is not desired.
EDIT:
This is the router of localhost:
export default function paymentRoutes() {
return [
{
path: "/payment/",
name: "PaymentSuccess",
component: PaymentSuccess
}
]
}
then in separated file:
Vue.use(VueRouter)
const routes = [ ...paymentRoutes()]
const router = new VueRouter({
routes
})
export default router

Why not render my components in Vue and Vue Router production?

Deploy a Laravel and Vue application using Vue Router, but the components are not mounted on my div with id app, what could be happening?
The host is a shared hosting, the Laravel application is in a project folder
I have defined my APP_URL and ASSET_URL variables to my mydomain.com/project/
On Vue Router routes the starting point is /admin
const routes = [
{
path: '/admin',
children: [
     ...]
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
})
The index file of the public folder is fine, in the first instance I show the login and it is displayed correctly, it validates the user, login and everything, but when I log in from the backend I redirect to the path admin is where my vue router acts.
What may be happening, I tried everything, to start the path with / on my vue router routes, but I am not successful.
I do not get any type of error in console or in the log of laravel
Edit
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});

My guess is you missed to set the URL offset/ base.
Add base: "/project/" to the router options
Further readings

Fetch Lumen controller result as Vue.js component

I'm actually trying to build a SPA (single page application) with Lumen as PHP framework and Vue.js as Javascript framework. The reason I use Lumen is because I provide some API that are not available within the SPA. I'm using vue-router to route all my page within the SPA. My question here is: is this possible to call a Lumen controller and get the result (blade vue) into a component for Vue.js?
I've searched the entire web for some help about my issue but, since I am not very used to code with vue.js, I didn't found what I need.
Here's what my app.js look for the moment:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Foo = {
template: '<div>foo</div>'
}
const Bar = {
template: '<div><span>bar</span></div>'
}
const router = new VueRouter({
mode: 'history',
base: '/',
routes: [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
});
new Vue({router}).$mount('#app');
But actually, I really want something like that:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: '/',
routes: [
{
path: '/foo',
component: './user/' // Calling controller expo as GET method (default action would be index()) and retreiving the blade vue for the vue.js component
},
{
path: '/bar',
component: './expo/' // Calling controller expo as GET method (default action would be index()) and retreiving the blade vue for the vue.js component
}
]
});
new Vue({router}).$mount('#app');
Thank you for your help. If you have any other solution for my problem, I'll be happy to hear them. I don't mind using other PHP framework or Javascript framework but, I this is possible with Lumen and Vue, I still wish to continue with them.

Ember js routing not working in 2.10

I was using this Ember route file to map this URI www.example.com/home/page with the template main-page.hbs located in the home folder
export default {
resource: 'home',
path: '/home',
map() {
this.route('main-page', { path: 'page' });
}
};
I was working fine as well until I upgraded my application from 1.2.0 to 2.1.0. I didn't find any difference in two versions with respect to routing in the documentation.Is there any change in routes documentation? Am, I doing something wrong? I am a newbie in Ember js and founding it difficult to understand the routing documentation
Full source code for the plugin is available # github
and I am using the discourse application

Here is an example of the current syntax of the router.js
I'm unsure of the specifics of your situation, but hopefully this will help.
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
// note the implicit 'application' route with {{outlet}}
this.route('main-page', { path: '/home' ); // or '/' to make it the root
this.route('rainbow', function() {
this.route('red');
this.route('orange');
// ... nested
this.route('vampire');
});
export default Router;
https://guides.emberjs.com/v2.1.0/routing/defining-your-routes/

Remove the # hash from URL when using Vue.js in Laravel Homestead

I have a Laravel 5.2 setup running in Homestead and using Vue.js router to build an SPA. I'm trying to completely remove the #hash from the URL which I know can be done, but I keep getting errors:
I've added rewrite ^(.+)$ /index.html last; to my vhosts file in Homestead:
server {
listen 80;
listen 443 ssl;
server_name app.myproject.dev;
root "/home/vagrant/Code/vibecast/app.myproject.com/public";
rewrite ^(.+)$ /index.html last;
index index.html index.htm index.php;
charset utf-8;
...
}
When I restart and open a page I get a 500 Internal Server Error.
Is there anything I need added to routes in Laravel?
var router = new VueRouter({
hashbang: false,
history: true,
linkActiveClass: "active"
})
I can get it working without the #hash (or the modified hosts file) when navigating around, but fails when I reload a page.

You can make Vue Router and Laravel Router work together nicely by making the following changes:
At the end of your routes/web.php add the next lines:
Route::get('{path}', function() {
return view('your-vuejs-main-blade');
})->where('path', '.*');
You need to add this at the end of file because you need to preserve the previously declared laravel routes in order to work properly and not be overwritten by the 404 page or vue-router's paths.
In your Vue router's config use the following:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let router = new Router({
mode: 'history', //removes # (hashtag) from url
base: '/',
fallback: true, //router should fallback to hash (#) mode when the browser does not support history.pushState
routes: [
{ path: '*', require('../components/pages/NotFound.vue') },
//... + all your other paths here
]
})
export default router
However, when navigating between laravel and vue-router, you need to keep in mind that leaving vue-router's page to a laravel page you must use a window.location.href code, an <a> tag or some sort of programmatic navigation in order to fully exit Vue-router's instance.
Tested this with Laravel 5.5.23, Vue 2.5.9, Vue-Router 3.0.1

I've managed to find a solution, via Matt Stauffer's demo app. First, no need to update vhosts file. Just need to update the SPA/Vue.js route in routes.php to:
Route::get('/{vue?}', 'AppController#spa')->where('vue', '[\/\w\.-]*');
If you have an admin panel and do not want to consider its prefix
Route::get('/{vue?}', 'AppController#spa')->where('vue','^(?!panel).*$');
And of course initialise the Vue.js router like so:
const router = new VueRouter({
history: true,
hashbang: false,
linkActiveClass: 'active'
})
router.mode = 'html5'
Ref: https://github.com/mattstauffer/suggestive/blob/master/app/Http/routes.php#L9

You need to set the router mode to html5 RE: http://vuejs.github.io/vue-router/en/api/properties.html
So your new code would be like:
var router = new VueRouter({
hashbang: false,
history: true,
linkActiveClass: "active"
})
router.mode = 'html5'

export default new Router({
mode: 'history', // https://router.vuejs.org/api/#mode
linkActiveClass: 'active',
})

Laravel router
Route::any('{all}', function () {
return view('welcome');})->where(['all' => '.*']);
Vue-router
export default new Router({
routes: [
{ path: '/', name: 'Home', component: HomeView },
{ path: '/category', name: 'Category', component: CategoryView },
{ path: '/topic', name: 'Topci', component: TopicView }
],
mode: 'history'
})

Add the below line to your Laravel web.php
Route::get('/{vue?}', 'App\Http\Controllers\AppController#index')->where('vue', '[\/\w\.-]*');
Vue-Router
const router = new VueRouter({
mode: 'history',
routes,
})

Categories