I am struggling to get Google Analytics to report correctly using the InertiaJS stack of Laravel Jetstream. I need to track individual page visits but since it's a SPA I'm unsure how to go about this. I have placed the tag in my app.blade but that shows me all traffic, not specific to each page, nor can I trigger events.
What's the best way to go about getting GA onto a Laravel Jetstream Inertia stack?
I opted in for using Inertia::share then on my app.blade I referenced the respective elements such as title etc as props.
Eg. RouteController (returns Inertia View):
Inertia::share([
'title' => $title,
'description' => $description,
'meta_image' => $meta_image,
'meta_url' => $meta_url
]);
return Inertia::render...
App.blade:
<title>{{$page['props']['title'] ?? ''}}</title>
<meta name="description" content="{{$page['props']['description'] ?? ''}}">
...
And finally in my AppLayout.vue I have a watch on these props for page changes:
watch: {
"$page.props.title"(newTitle) {
this.setPageData();
},
"$page.props.description"(newDescription) {
this.setPageData();
},
},
Only really need to watch the Title as robots should load each page fresh (for SEO purposes) but the this works well for meta tags (Open Graph) and also GA to track each page.
Related
I'm using Laravel 9 with Inertia and VueJs. I'm trying to paginate my invoices, and the links display as expected when I load the page (http://localhost:3000). However, when I click on a button to go to the next page (or any other page from the pagination), all the links change to:http://localhost/. I don't know how to solve this.
InvoiceController
$invoices = Invoice::latest()
->with('customer:id,name')
->orderByDesc('invoice_date')
->paginate(10);
return Inertia::render('Invoices', ["invoices" => $invoices]);
.env
APP_URL=http://localhost:3000
DEV_URL=http://localhost:3000
webpack.mix.js
// ...
.browserSync("localhost");
config/app.php
'url' => env('APP_URL', 'http://localhost:3000'),
Update
A github issue is opened: https://github.com/inertiajs/inertia/issues/811
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'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!