Issue using persistent layout with Vue.extend component

[BrianLangevin]

When using TypeScript, Vue components must be defined using Vue.extend in order for types to be properly inferred. However, when Vue.extend is used on Inertia pages, the layout property is ignored and no layout is rendered.

Has anyone come up with a way to use TypeScript with Inertia pages and persistent layouts?

[TheDoctor0]

Yes, I even made PR that solve this issue.

[applicazza]

@BrianLangevin @TheDoctor0

This is how I've done it with original inertia-vue.

Layouts/index.ts:

import DefaultLayout from './DefaultLayout.vue';
import ProjectLayout from '@/inertia/Layouts/ProjectLayout.vue';

export function defaultLayout(h: any, page: any) {
    return h(DefaultLayout, [page]);
}

export function projectLayout(h: any, page: any) {
    return h(DefaultLayout, [h(ProjectLayout, [page])]);
}

Components/Dashboard.vue:

<template>

    <div class="scrollable-container">

        <div class="scrollable"></div>

    </div>

</template>

<script lang="ts">
    import Component from 'vue-class-component';
    import Vue from 'vue';
    import {defaultLayout} from '../Layouts';

    @Component
    export default class Dashboard extends Vue {
        static layout = defaultLayout;
    }
</script>

<style scoped>

</style>

Probably you also need to add next shim:

declare module '*.vue' {
    import Vue from 'vue';
    // noinspection JSDuplicatedDeclaration
    export default Vue;
}

Hope this helps.

[gajosadrian]

Anybody kwows how to use remember yet? I have tried static remember = 'from' and it doesn't work 😕

EDIT:

Ok, I fixed it by doing this:
declarations.d.ts

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    remember?: any;
  }
}

Some Vue Component

@Component({
  remember: 'form',
})
export default class extends Vue {}