inertiajs / inertiajs.com Goto Github PK

Hi, I had translated Laravel documentations. I want to translate your documentation of inertia into Japanese. So could you tell me what license you used to for documentation?

Hello,

This is not a issue. I just want suggestion regarding using inertia. I have been using inertia with bootstrap for learning in laravel and I felt the overall experience is great. I am also mentioning that I am new to vue.

In my recent project I am going to implement Inertia but it seems most of the vue template are used for vue-router not for inertia and I am facing problem implementing them. It seems I have to edit lots of files in order to implement.

I want suggestion in this regard that what is the proper way to implement a vue template to laravel using inertia js instead of vue router.

You can give me suggestion or give me any resource.

Reported on Twitter but i just thought i'd report the following issue here too, in case it gets lost.

This happening on both Firefox & Chrome when i try view the website. This is happening on multiple devices for me, i have tried clearing cache and that doesn't seem to be the issue.

Basically document what I've outlined here.

What is the license for this repository, please?

Thank you.

Hello,

I ran into a problem while using Inertia with Laravel 8 (with Jetstream).
If I add a middleware as the shared data page suggests, and put my additional data to be shared, nothing of that gets through to the frontend.
There was someone else with the same problem who found a workaround, but it would be great to find out why isn't the documented method working and maybe update the docs. I don't know, but if it's Jetstream, that's making this not to work, then a note for Jetstream users would be useful too.
Thanks for considering.

Hello ✋ !

Based on the work of josephmancuso, creator of MasoniteFramework, I released an alpha version of the masonite-inertia adapter for Inertia.js 🎉 .

I am also doing the PingCRM demo here, it's a WIP but should be ready soon.

Is it possible to add this adapter on the list on inertiajs.com ? I guess I have to submit a PR, I am just checking in first !

Thank you 👍 !

When I use Inertia.delete on react, data is deleted as expected, but shows an error that says that DELETE method is not supported (this happens when I use Route::resource but it is pretty anoying) supported methods: GET, HEAD, POST

I guess because other resource controllers use the same route, but on "normal" laravel you just put route's name and it works and as far as I know Inertia.visit doesn't work with route names

Hi,

whenever I have structure like this:

ShoppingBag: [
    name: 'sth',
    Products: [{
        price: 10,
        name: 'pizza'
    }]
]

and shopping bag is a prop, when I add item to products collection it doesn't get updated. However, when I change sth in main object it gets updated. How do I make data change triggered when I update nested, second level collection?

Version 0.9 has been out for a few days now without any documentation, and upgrading appears to break something. Would be great of the documentation could be published at the same time as a new release.

I noticed that the XSRF token header is only set with axios when withCredentials option is set to true.

window.axios.defaults.withCredentials = true;

Is this correct? According to the docs I assumed it happens automatically. Without explicitly setting it to true it won't get attached automatically for me.

If this is correct I could write up an additional note for the CSRF section.

The "Server Side Setup" could use a bit more information about $rootView and the app layout path handling. Inertia does not expect app.blade.php to be in the resources/views/layouts directory. It looks in just simply resources/views for it. However, every setup I have, app.blade.php is in resources/views/layouts.

I am fairly new to Laravel, but I don't think by default an app.blade.php file even exists in a stock Laravel 8 install. It gets created by Laravel Breeze or some other auth scaffolding, which places it in a layouts directory. Though, the Breeze install option with Vue/Inertia, doesn't use the layouts directory, which is why it works there with the vue option. From what I recall dabbling in different versions/setups of Laravel over the years, is traditionally the app.blade.php file is in the layouts directory.

I am building a hybrid on a stock Laravel 8 setup, and side-by-side comparing a stock Breeze install. I ran into an error like "not able to find [app]" (not exact error, idr exactly how it was worded). I thought it was with the vue page files or the @inertia function and vue not able to hook to the element... after a while comparing my breeze with vue setup vs this one, I finally pinned it down to not being able to find the layout file.

The error thrown when it can't find the app.blade.php file could be a little bit more informative as well lol :)

Page in question: https://inertiajs.com/server-side-setup

Possible solution: Instead of just a note box, maybe go into a bit more detail about the layout file. Dot notation works as well, so you can use:

protected $rootView = 'layouts/app';

or

protected $rootView = 'layouts.app';

The problem

One of the challenges with the documentation right now is that all the framework specific content must be placed within the tabbed code component. The problem is, I often want to create additional paragraphs of content for specific frameworks, but there is no way to conditionally show this content based on the selected frameworks. I did add the description tag to the tabbed code component to help with this, but it's really only a bandaid. This approach has forced me to write the documentation content using more generic framework-agnostic wording, which often isn't helpful to readers.

New framework selector

I've been thinking about how to solve this, and what I really want to create is dedicated documentation pages for each server-side and client-side framework combination. I'm thinking there could be a "framework selector" in the site header that lets you choose one of the following:

• Laravel + Vue
• Laravel + React
• Laravel + Svelte
• Rails + Vue
• Rails + React
• Rails + Svelte

Once you make a selection, all the content from that point forward will be for the frameworks you selected. Keep in mind that a single page may include both sever-side and client-side code on it.

SEO friendly

I also want this to be SEO friendly. Meaning, I want each framework combination to have it's own unique URL, with server-side rendered content:

• /laravel-vue/shared-data
• /rails-react/server-side-setup

To prevent existing links from breaking, we could forward them to a sensible default, which is probably /laravel-vue.

Implementation

From an implementation perspective, I'm not really sure how to do this with Next, but if I to do it with Laravel, it would be pretty straightforward:

Route::get('/{server}-{client}/shared-data', function ($server, $client) {
    return view('shared-data', [
        'server' => $server,
        'client' => $client,
    ]);
});

Then, in the Blade files we could conditionally show content based on the selected frameworks:

@if ($server === 'Laravel')
    <!-- Laravel content -->
@endif

@if ($client === 'Vue')
    <!-- Vue content -->
@endif

<!-- Framework-agnostic content -->

The question is, can this be done with Next? Or should we consider converting the documentation to Laravel?

I have been working on integrating Inertia with Ruby on Rails application. For this, I have to spend a lot of time with documentation. A small improvement in the documentation site which could go a long way is if I select Rails in one of the snippets then all snippets should switch to Rails.

Consider the following scenario

I have selected Rails in the first snippet but I have the other snippets still shows Laravel code which is not relevant to me. Also, switching every snippet to Rails gets slightly irritating after a while.

P.S: If we can remember the user's selection locally and pre-select their preference in every visit then it would be more awesome.

Thanks!

The Ping CRM demo application for Laravel have a Macros that have been added for testing.

What are people’s thoughts on adding a Testing section to the website to show users how they can easily add a couple of macros to test their applications?

For reference: https://github.com/inertiajs/pingcrm-svelte/blob/master/tests/TestCase.php

i think there is a missing step after installing inertiajs using npm.
npm install @inertiajs/inertia @inertiajs/inertia-react
i think you should add another step of installing react.
npm install react react-dom
i didn't did this step because it does not exist in the documentation then npm run dev did not succeed so i figured out from a tutorial that we have to install react and react-dom first.
if i am correct i hope this step gets added in the doc

It would be nice if the releases pages could be weighted lower than the main documentation pages somehow. Basically all pages that follow this pattern https://inertiajs.com/releases/* would ideally be ranked lower.

Reading the DocSearch docs, this seems doable: https://docsearch.algolia.com/docs/config-file/#using-page-rank

https://www.reddit.com/r/inertiajs

Is there plans to support Codeigniter ?

I don't see an offical adapter ? 😕

Hello ✋
I get this error
Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined
at Object.visit

whenever i want to do a get visit() or replace() like this :
this.$inertia.visit(url, {preserveState: false, preserveScroll: true})

Is there plans to support Django?
I dont see an offical adapter, yet i believe i saw some where you mentioned this would work with it?

hi,

first of all thank you so much for this inertiajs, its amazing.

can we get a guide in the docs about how to create an adapter?

Thanks,
Anees Khan

The latest release of any of Inertia's packages shown on inertiajs.com is from Jan 18, 2022.

When reviewing the content within Scroll management. I clicked on the 'making visits' link.
When clicking on the link, a dialog appears stating "404 | Not Found".
I believe the redirect page was suppose to be -> https://inertiajs.com/manual-visits

It would be great to have an API reference in the documentation that shows an index of (and possibly links to) all the available public methods in a specific thing. Specifically, we're referring to the Form helper methods here, but this could apply to other things as well.

First of all thank you for this awesome library, I've enjoyed using Inertia!

I've got this issue fixed for my own use; just want to clarify if this is expected behaviour, and if so, would a PR on the docs be welcome (and if so, how could we communicate it best).

The documentation page on CSRF says it is not necessary to configure CSRF tokens on Laravel since Axios automatically uses the XSRF-TOKEN cookie and pass it in the req header.

However, a better approach is to use the CSRF functionality already built into axios for this. Axios is the HTTP library that Inertia uses under the hood.
(...)
Some frameworks, such as Laravel, do this automatically, meaning there is no configuration required.

Problem:
I kept getting 419 errors in POST requests. I checked the request header and found that the X-XSRF-TOKEN value in the header does not match the Laravel session _token value. I found this insightful SO thread about CSRF vs XSRF difference. TL;DR = XSRF is the encrypted form of CSRF, confirmed in Laravel official docs (albeit with less detailed explanation).

This begs the question: When we send an Inertia POST request with X-XSRF-TOKEN in the header, will Laravel be smart enough to decrypt/decode it and match it with the regular token? If the XSRF token is checked against CSRF ofc it will not match.

Solution:
I passed the CSRF token to the props through HandleInertiaRequests and included it in all post requests as shown in the docs. Once I send _token in the payload the 419 issue disappeared. I did not have the time to investigate further on the XSRF - CSRF stuff, but it seemed to be the culprit as there was no other change to the code.

Additional info:
These are same-origin requests (request to Laravel controller routes). Server-side forms (with the @csrf Blade directive) work fine since the beginning.

I use the following packages:

• server (Laravel)
  • inertiajs/inertia-laravel 0.3.6
  • laravel/framework 8.12
• client (Svelte)
  • @inertiajs/inertia 0.8.2
  • @inertiajs/inertia-svelte 0.6.1

Possibly related to #168 (can't confirm because i dont use axios as a dependency in my package, not sure how i could access the axios object)

I'm posting as an issue to discuss these:

• is this a regular/expected/common behaviour?
• if yes, would is be beneficial to update the documentation on CSRF in the paragraph about Laravel? I think of adding something along the line of "If you are having persistent 419 errors, include the CSRF token as prop in your payload as shown above".
• if not, I just hope this would help in case there other people having the same issue.

Do you have any to-do list that you're following, right now?

I'd love to help out with writing what part of the docs I feel comfortable writing, but at the same time I don't want to sit down and write something that is already almost completely done.

Versions:

• @inertiajs/inertia version: "^0.8.2"
• @inertiajs/inertia-svelte version: "^0.6"

Describe the problem:

In the docs for svelte, the example for the use:inertia directive on a button throws an undefined url navigation.

import { inertia } from '@inertiajs/inertia-svelte'

<button href="/logout" use:inertia="{{ method: 'post' }}" type="button">Logout</button>

// Renders as:
<button type="button">Logout</button>

This doesn't work as intended. What works, from inertiajs/inertia#206, is

<button
  use:inertia={{ href: '/users/100', method: 'post', data: { '_method': 'delete' }}}
  class="btn-indigo"
  on:click={() => alert('User deleted')}>
  Delete
</button>

The href goes into the options object.

Thanks

First of all let me thank you guys for all you hard work creating such convenient tool.
We are using Vue 3, Inertia and Laravel in one of our projects. Beside that we created an web components package with Stencil to be able to use standard UI elements among other our projects.
Web components have props which are bound to Vue data (computed, props, etc.).

When the page loads first time (fully with all the html etc.) a web component get the correct values (plz see the screenshot):
screenshot of the initial page load

But when the page is reloaded with inertia, the values are not passed
screenshot of the page reloaded with Inertia (changed the route to another menu item and back)

The issue appears only in production build of the app, in the development build everything works correctly.
Also if I add the necessary attributes to the web component manually in the dev tools it renders correctly, so the issue is not with the web component (plz see the scrrenshot)

Currently, the docs still contain setup of both the client side and server side with Laravel mix. As Laravel has changed to support vite, a change in the docs to reflect this would be necessary.

Hi,
I love Inertia! Its so nice to remove the blade files from the mix. I am having one issue that I am sure is an easy fix. I am trying to use stripe which requires <script src="https://js.stripe.com/v3/"></script> to be added to the header. I am having trouble figuring out how to add that with Inertia. I added VueMeta and added it here

<script>
    import AppLayout from '@/Layouts/AppLayout'
    export default {
        metaInfo: {
            script: [ { src: 'https://js.stripe.com/v3/' }],
        },

but that didn't seem to add it where I could see in the source file. Is there a way to do this?

The discord invitation link on the internet site is expired. When I try to join the discord server, i only get a message that the invite is invalid.

On my phone, so I’ll just post this here

https://discord.com/channels/592327939920494592/592328250923941898/875772058930405396

Right now, these features aren't documented yet.

• inertiajs/inertia#999
• inertiajs/inertia#1019

I'm not sure how much of an issue this is but I noticed that the recent change here which replaces the "requests" page with the "manual visits" page introduced a redirect from the old path to the new one.

However, requesting the old path now looks to be returning a 404 instead of a redirect and I'm guessing that isn't intended behaviour.

Just thought I'd give you a bit of a heads up for any future changes (that is if this is an issue).

Hello,
So, I have this inertiaJS & VueJS app am creating, the backend is in Laravel. At the start, the app is working fine, but once you navigate to another page say log in, Jquery just fails without any error message and everything becomes deformed, even when I navigate back it doesn't work. I have uploaded a video of how it's behaving on YouTube (1080P) in case you want to see it. Please note, it's breaking when I navigate to any not just log in.

How do I solve that issue with inertia?

here is the same question on stack overflow with code pasted in.

The documentation for install dependencies is incomplete. Currently there is only described, how to install vue2 dependencies. The lines

npm install @inertiajs/inertia @inertiajs/inertia-vue3
yarn add @inertiajs/inertia @inertiajs/inertia-vue3

are missing / not mentioned

Inertia document says 640K: https://inertiajs.com/responses#maximum-response-size

Firefox document says 2M: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

I tried to test Inertiajs with Laravel and Svelte according to documentation. I had a quite many errors and managed to resolve them. Here is what I needed to do:

Add dependencies to package.json:

"svelte": "^3.24.1"
"svelte-loader": "^2.13.6"

Add webpackConfig to webpack.mix.js:

.webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
          extensions: ['.js', '.svelte'],
          mainFields: ['svelte', 'browser', 'module', 'main'],
          alias: {
            '@': path.resolve('resources/js'),
          },
        },
        module: {
          rules: [
            {
              test: /\.(svelte)$/,
              use: {
                loader: 'svelte-loader',
                options: {
                  emitCss: true,
                  hotReload: true,
                },
              },
            },
          ],
        },
      })

Add Pages-directory to /resources/js/ -directory

Add Welcome.svelte -file to Pages-directory:

<script>
  export let foo
</script>
<h1>Hello foo: {foo} from backend</h1>

Modify route in web.php-file:

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'foo' => 'bar'
    ]);
});

Run 'npm install' and 'npm run watch'. Now you should see a 'Hello from Svelte'

The documentation or github-repo should include a simple working example for clean install of Laravel and Svelte.

Hi!

Whenever there is some code sample in docs it would be great to have also some information about where to put it. I always find it confusing when there is a code explanation and no info about file name or location is provided. Especially, when description starts from "you simply need to" ;)

For example "Configuring" paragraph of https://inertiajs.com/asset-versioning page

Hello,

This is not an issue as such, but for user experience; the pc version of the website could do well with preserve scroll when accessing the left Navigation bar elements (links).

😊Thanks

Every time I search the docs, I always seem to land on a release note. Driving me a little nuts. Could you please lower the weighting for release notes in Algolia?

On the https://inertiajs.com/forms#submitting-forms page, the first example is using a form object and a traditional Inertia post, without using the form helper. While this isn't bad per-se, I think it would be less confusing to adjust the example to reflect a situation in which you would use a traditional Inertia.post over the Inertia form.

Using the Laravel paginator with Inertia is great. However, it is not mentioned in the documentation anywhere. I found the solution in the PingCRM demo app, but it would be nice to have this in the docs for new user to be able to set up the paginator straight away when starting a new project.

I've dropped the code from PingCRM demo so that it is clear what I am talking about.

protected function registerLengthAwarePaginator()
    {
        $this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
            return new class(...array_values($values)) extends LengthAwarePaginator {
                public function only(...$attributes)
                {
                    return $this->transform(function ($item) use ($attributes) {
                        return $item->only($attributes);
                    });
                }

                public function transform($callback)
                {
                    $this->items->transform($callback);

                    return $this;
                }

                public function toArray()
                {
                    return [
                        'data' => $this->items->toArray(),
                        'links' => $this->links(),
                    ];
                }

                public function links($view = null, $data = [])
                {
                    $this->appends(Request::all());

                    $window = UrlWindow::make($this);

                    $elements = array_filter([
                        $window['first'],
                        is_array($window['slider']) ? '...' : null,
                        $window['slider'],
                        is_array($window['last']) ? '...' : null,
                        $window['last'],
                    ]);

                    return Collection::make($elements)->flatMap(function ($item) {
                        if (is_array($item)) {
                            return Collection::make($item)->map(function ($url, $page) {
                                return [
                                    'url' => $url,
                                    'label' => $page,
                                    'active' => $this->currentPage() === $page,
                                ];
                            });
                        } else {
                            return [
                                [
                                    'url' => null,
                                    'label' => '...',
                                    'active' => false,
                                ],
                            ];
                        }
                    })->prepend([
                        'url' => $this->previousPageUrl(),
                        'label' => 'Previous',
                        'active' => false,
                    ])->push([
                        'url' => $this->nextPageUrl(),
                        'label' => 'Next',
                        'active' => false,
                    ]);
                }
            };
        });
    }

Add vue3.2 syntax <script setup> to the code of the official textbook.

Options API --> Composition API

resolve: (name) =>{ 
		const page = require(`./Pages/${name}.vue`);
		page.layout = Layout
		return page;
	},

Layout component has no slot, but the page loads all the same,
Basically I cant control when to hide page in the layout.

on the page : https://inertiajs.com/forms

The code snippet under "Server-side validation" return an Error.

public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'errors' => fn () => $request->session()->get('errors')
                ? $request->session()->get('errors')->getBag('default')->getMessages()
                : (object) []
        ]);
    }

The error is :
ParseError syntax error, unexpected '=>' (T_DOUBLE_ARROW), expecting ']'