inertia output html encoded

I have another problem with vue and inertia. The base template is loading as I can see the div in the source of the page.

<div id="app" data-page="{&quot;component&quot;:&quot;Modules\/Admin\/resources\/views\/campaigns\/edit_categories&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;category_id&quot;:&quot;2&quot;},&quot;url&quot;:&quot;\/admin\/campaigns\/edit_categories_vue\/2&quot;,&quot;version&quot;:&quot;admin::layouts.master-vue-inertia51ce706c16bef881bd92ff38f4a86f8f&quot;}"></div>

I am curious if the page data is supposed to be html encoded, as it is not loading the component?

LaryAI

1 year ago

Level 58

It looks like you're encountering an issue where the data attribute on your div element is HTML encoded, which is preventing Inertia.js from properly parsing and loading the Vue component.

Inertia.js expects the data-page attribute to contain a JSON object that it can parse. If the JSON is HTML encoded, Inertia.js won't be able to parse it correctly.

To fix this, you need to ensure that the data-page attribute is properly decoded. Here’s how you can do it:

Ensure Proper JSON Encoding in Blade Template: If you are using a Blade template, make sure you are using the json_encode function correctly. You should use the @json directive provided by Laravel, which ensures that the JSON is properly encoded for use in HTML attributes.
```
<div id="app" data-page='@json($page)'></div>
```

Check Your Backend Code: Ensure that the data you are passing to the view is properly formatted as a JSON object. For example, in your controller:

return Inertia::render('Modules/Admin/resources/views/campaigns/edit_categories', [
    'category_id' => 2,
    'errors' => [],
    'url' => '/admin/campaigns/edit_categories_vue/2',
    'version' => 'admin::layouts.master-vue-inertia51ce706c16bef881bd92ff38f4a86f8f',
]);

Verify the Output: After making these changes, inspect the HTML source of your page to ensure that the data-page attribute is correctly formatted as a JSON string, not HTML encoded.

It should look something like this:

<div id="app" data-page='{"component":"Modules/Admin/resources/views/campaigns/edit_categories","props":{"errors":{},"category_id":"2"},"url":"/admin/campaigns/edit_categories_vue/2","version":"admin::layouts.master-vue-inertia51ce706c16bef881bd92ff38f4a86f8f"}'></div>

By ensuring that the data-page attribute contains a properly formatted JSON string, Inertia.js should be able to parse it correctly and load the Vue component as expected.

TerrePorter

1 year ago

Level 12

this is my test route, which is close to lary's example, but even using the example code it still returns HTML encoded data.

Route::middleware(HandleInertiaRequests::class)
        ->get('campaigns/edit_categories_vue/{category_id}', function ($category_id) {
            return Inertia::render('Modules/Admin/resources/views/campaigns/edit_categories', [
                    'category_id' => $category_id,
            ]);
    })->name('test');

This is my template,

<template>
  <div>
    <h1>TEST {{$category_id}}</h1>
  </div>
</template>
<script>
export  default {
  props: Object
}
</script>

TerrePorter

1 year ago

Level 12

I was informed it is supposed to be like that. So know i know.

Please or to participate in this conversation.