i'm adding vue js into my current laravel apps so i can make it SPA and thats mean laravel is only acting as backend and rest of it is controlled by vue js from rendering view to routing.
My current laravel apps using kodeine laravel-acl for controlling which page and which action that my user can do by simply
put this in route:
Route::get('admin', [
'as' => 'admins.admin.index',
'uses' => 'UserController#index',
'middleware' => ['auth', 'acl'],
'can' => 'view.admin_view']);
and if i just do this in view to hide some action if user don't have permission
#permission('view.admin_view')
//some link or button
#endpermission
and all these permission is stored in mysql database and each user have different set of permission.
but how to do that if i making it vue js SPA? since all route is controlled via vue js?
You can perform checks before going to a certain route via beforeEnter() in routeConfig. Sample is here:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ... Do your checkings here
}
}
]
})
To simply permission detection logic you can use CASL - https://github.com/stalniy/casl
There are a lot of interesting stuff in documentation and articles on medium explaining how integrate with Vue and other popular frameworks!
Related
I'm working on a little project using Laravel and VueJs, I'm also using dynamic component in my blade template.
I would like to know home can I navigate between pages(components) since I'm not using vue-router.
this is my code :
methods: {
register(url){
Csrf.getCookie().then(() => {
User.register(url, this.form)
.then(() => {
// how can i redirect the user since i'm not using vue router / should i use vue router ?
})
.catch(error => {
});
})
}
}
Your choices are pretty much either:
Use vue-router, including its element on a single Blade view and then navigating between Vue routes with <router-link> or this.$router.push()
Use a single Vue component per Blade view in Laravel, navigating between them with a standard <a href> link
Is there a way to use Laravel Blade for one part of a multipage site (e-commerce), and Inertia/Vue for some specific pages (like the basket and the admin pages)? Not mixing the two on the same pages, as I see it done with other commentaries.
The first category is a load of pages that are merely static, need fast loading and robust SEO referencing (product pages and catalogues). The second do not need to be indexed, but need a lot of user interactions.
I have tried a few things with my first project, but I don’t seem to be able to call Laravel routes when Inertia is active. Plus it would not really make sense to load all Inertia and Vue in the Blade pages. So as a starter I guess I would need to load the Inertia + Vue code only on the Vue pages (admin and basket). And I guess there are a lot of other issues to take care of.
Or maybe scrap Inertia.js, and just load vanilla Vue.js on the Vue pages? But then that means loading the router and the datastore as well...
Many thanks for any idea on the best way to proceed!
E.
You can mix pages as you want:
1. For Inertia pages.
// View:
<inertia-link href="/dashboard">dashboard</inertia-link>
// Laravel controller:
public function index(Request $request)
{
return Inertia::render('Dashboard/Index', [
'data' => [
// ...
],
]);
}
2. Blade pages.
// View:
dashboard
// Laravel controller:
public function index(Request $request)
{
return view('dashboard.index', [
'data' => [
// ...
],
]);
}
In my Laravel 5.6 application with vue.js 2.5.7 I and vue-router 3
I use Socialite for login into the system
and in case of success I need to make redirection to some vue form with success message and next options available.
For this I make redirection like:
$url= $site_hosting . "/home";
return redirect()->route($url, [])->with([
'text' => 'google_new_user',
'type' => 'success',
'action' => 'successful_login'
]);
where url has value like
example.com/home
the question is that I do not know how redirecting from Laravel control to point to Vue component, defined in resources/assets/js/app.js file as
const routes = [
{
components: {
notFound: NotFound,
...
How can it be done ?
MODIFIED BLOCK # 2
Thank you for the link, but actually I did not catch the decision.
I see in laravel's route file url with "vue_capture" defintion,
but in url examples there are
/resource/,
/posts/,
/posts/{slug}
and “storage” in reg expression. What are "storage"/"vue_capture" some predefined names for some actions ?
Could you, please, give some detailed explanations how it would work, as I need FROM lasravel's action to open vue form?
Also I starting working with vue reading some docs/videos and now my router is defined as :
const router = new VueRouter( {
mode: 'hash', // default
routes
})
with a lot of routes defined.
I mean mode has different value here. Will this example work with this option ?
Thanks!
Check out vue router. https://router.vuejs.org/
Here's an in depth tutorial https://laravel-news.com/using-vue-router-laravel
I need to change the route of my page from mysite/practice to mysite/practice/new
I have a React project set up in laravel with lumen.
routes.php:
$app->get('/practice', ['as' => 'pet_practices', 'middleware' => 'check_vet_roles', 'uses' => 'PetsController#practice']);
PetsController.php
public function practice(Request $request)
{
$variables =$this->getUserInfo($request);
return view('practice-profile') ->with('variables', $variables);
}
practice-profile.blade.php
#extends('layouts.master')
#section('content')
<div id="practice-profile"></div>
#endsection
My JSX file
var React = require('react');
var ReactDOM = require('react-dom');
var PageCollectionComponent = require('./PageCollectionComponent');
if (document.getElementById('practice-profile')) {
ReactDOM.render(<PageCollectionComponent />,document.getElementById('practice-profile'));
}
Everything works fine in this setup. When I go to mysite/practice page loads fine.
But if I change the route to
$app->get('/practice/new', ['as' => 'pet_practices', 'middleware' => 'check_vet_roles', 'uses' => 'PetsController#practice']);
and go to mysite/practice/new it doesn't work anymore. The layout loads from the blade file, but it doesn't get to the JSX file anymore. Why is that?
In the console, I get this error:
Uncaught SyntaxError: Unexpected token :
I'm fairly new to this project so it's probably something fundamental that I am missing here.
It's hard to tell without more info. But, maybe the problem occurs because you're moving up a directory level, make sure that your JS file is being loaded from the correct location. If you're using a relative path like <script src="app.js"></script> then going a level deeper will try to request yoursite/practice/app.js instead of yoursite/app.js.
I am pretty new to Laravel, I am so confused on how to start this. but basically I have a switch statement with different display mode cases and what I am trying to do is to connect routing with blade. How do I display $mycontent in blade based on cases like these ? Thanks
switch(MyPage::$some_display_mode) {
case 'normal':
$mycontent //this is what I want to display in blade
case 'ajax':
case 'other'
}
I want to connect these cases normal,ajax ,other etc with with different MyPages that I have so that I can display my blade files something like this
<html>
#yield('content)
</html>
#section('content')
whatever comes from the pages
#endsection
You can use route groups and do something similar to this:
Route::group( [ 'prefix' => 'AJAX', 'namespace' => 'AJAX' ], function() {
Route::get( '/something', 'ajaxController#doSomething' );
});
There is multiple ways to group routes shown here:
laravel grouped routing
Then handle returning the view in the controller and the use template-inheritance as explaned here:
laravel template-inheritance
This way will allow you to group and keep your routes organized