Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blank page in inertiajs/vue2 1.0.0 - empty body tag #1403

Closed
ArkadiuszRodak opened this issue Jan 19, 2023 · 3 comments
Closed

Blank page in inertiajs/vue2 1.0.0 - empty body tag #1403

ArkadiuszRodak opened this issue Jan 19, 2023 · 3 comments

Comments

@ArkadiuszRodak
Copy link
Contributor

ArkadiuszRodak commented Jan 19, 2023 •
edited
Loading

Version:

  • @inertiajs/vue2 version: 1.0.0
  • inertiajs\inertia-laravel version: 0.6.9
  • laravel/framework version: 9.48.0
  • laravel/mix version 6.0.43
  • vue version: 2.7.14
  • typescript version: 4.9.4

Describe the problem:

I have used Inerita for a while and now trying to migrate to version 1.0.0. I follow the docs but I always get blank page. There is no <div id="app"> tag in the body (checked in FF and Chrome).
image

I use Composition API with script setup in every Vue component.
It seems like some problem in Vue render method. Vue instance is present in devtools and I am able to show something like that without render method:
template: <div>Hello</div>

Steps to reproduce:

master.blade.php - default in Inertia middleware

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="alias" content="{{ config('app.alias') }}">
    <title>{{ config('app.name') }}</title>
    <link rel="shortcut icon" href="{{ asset('/icons/favicon_'.App::environment().'.ico') }}">
    <link href="{{ asset(mix('/css/app.css')) }}" rel="stylesheet">
    @inertiaHead
    <script src="{{ asset(mix('/js/manifest.js')) }}" defer></script>
    <script src="{{ asset(mix('/js/vendor.js')) }}" defer></script>
    <script src="{{ asset(mix('/js/app.js')) }}" defer></script>
</head>
<body>
    @inertia
</body>
</html>

app.ts - entry point of application

import { createApp } from 'layout';

createApp({});

index.ts - my custom layout package

import { createInertiaApp } from '@inertiajs/vue2';
import AxiosPlugin from './plugins/axios';
import ZiggyPlugin from './plugins/ziggy';
import Vue, { Component } from 'vue';
import Vuetify from 'vuetify';
import BaseLayout from './components/templates/BaseLayout.vue';

/**
 * It creates a Vue app with Inertia, Axios, and Vuetify
 * @param {object} options - object - This is an object that will be passed to the Vue instance.
 * @param {Component} CustomLayout - This is the layout component that will be used for all pages.
 * @param {string} [appElementId=app] - The id of the element that the app will be mounted to.
 */
export function createApp(
  options: object,
  CustomLayout: Component = BaseLayout,
  appElementId: string = 'app'
) {
  AxiosPlugin.initInterceptors();
  Vue.use(Vuetify);
  Vue.use(ZiggyPlugin);

  const vuetify = new Vuetify({
    theme: {
      dark: localStorage.getItem('vuetify-dark') === 'true',
    },
  });

  createInertiaApp({
    id: appElementId,
    resolve: (name) => {
      if (name.startsWith('layout::')) {
        return import(`./components/pages/${name.slice(8)}`);
      } else {
        return import(`@/components/pages/${name}`).then(({ default: page }) => {
          if (page.layout === undefined) {
            page.layout = CustomLayout;
          }
          return page;
        });
      }
    },
    setup({ el, app, props, plugin }) {
      Vue.use(plugin);

      new Vue(Object.assign({
        vuetify,
        // template: '<div>Template</div>',
        render: (h) => h(app, props),
      })).$mount(el)
    },
  });
}
@gugu759153
Copy link

change setup({ el, app, props, plugin }) to setup({ el, App, props, plugin }), and it works.

@ArkadiuszRodak
Copy link
Contributor Author

change setup({ el, app, props, plugin }) to setup({ el, App, props, plugin }), and it works.

Thank you. That was the case, but I am still confused. I have to add // @ts-ignore to the setup code, because I get TS error:

TS2339: Property 'App' does not exist on type '{ el: Element; app: InertiaApp; props: { attrs: { id: string; 'data-page': string; }; props: InertiaProps; }; plugin: PluginObject<any>; }'.

That was the reason why I wrote lowercase app earlier. Maybe there is still some TS issue...

@ArkadiuszRodak
Copy link
Contributor Author

I have created PR:
#1418

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ArkadiuszRodak @gugu759153