yyx990803 / laravel-vue-cli-3

Example project using Vue CLI 3 with Laravel

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there a good way to inject initial state using the default template?

Bowens20832 opened this issue · comments

Similar to #2, if Laravel is serving up the views, is there a good way to inject an initial state into the window object using Vue CLI 3 when using the dev server?

I don't think this is possible at the moment.
yarn serve will still serve the index.html inside frontend/public and won't support blade or php. Only on yarn build the resources/views/index.blade.php file will be overwritten. You can then change that file to include some blade or php but that is not a good solution.

Yeah I figured as such, but I figured I would ask... No big deal! Thanks!

commented

@Bowens20832 I've gone down this rabbit hole a bit. You can get it working but it involves building your html file into a blade template embedded with @yield('section').

Then your index.blade.php can inject the application initial config or state. Surprisingly I would actually not recommend this, as you have to give up a real separation of concerns for not much performance boost (1 Blocking HTTP Request, 2 if you include CORS).

A better method may be to have a static template (not built by vue) and to just do away with index generation (https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation) and link your app to a single file.

A third method might be to do what mix does, and lookup the mix manifest file, and inject the JS with the hash instead (https://github.com/laravel/framework/blob/master/src/Illuminate/Foundation/helpers.php#L593)

Either way, this is all pretty dirty & disgusting. I'll let you know how I go :)