When utilizing the <inertia-link> tag, the Vue component fails to render

Question

When utilizing the <inertia-link> tag, the Vue component fails to render

After implementing the <inertia-link>, I noticed that the child component test.vue is not rendering. It only displays when I remove those tags. Any suggestions on what might be causing this issue?

test.vue

<template>
    <div>
        <div class="p-6 sm:px-20 bg-white border-b border-gray-200">
            <div>
                <b-logo class="block h-12 w-auto" />
            </div>

            <div class="mt-1 text-2xl">
                {{ $page.user.first_name }} {{ $page.user.last_name }}
            </div>

            <inertia-link :href="#">
                test-link
            </inertia-link>

        </div>
    </div>
</template>

<script>
    import BLogo from './BLogo'

    export default {

        components: {
            BLogo,
        },
    }
</script>

The inclusion of this component in another .vue file is through <my-test />

This scenario exists within laravel 8. Additionally, it was observed that using the <inertia-link> tag in the parent vue results in its display. Hence, the tag functionality seems to be working.

(It appears to be utilized by the default Jetstream profile pages).

javascript vue.js vuejs2 vue-component inertiajs

Answer 1

Answer №1

When implementing the Vue3 code snippet provided by inertiajs on their official website:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

You will need to include the Link component like this:

import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .component('inertia-link', Link)
      .mount(el)
  },
});

Once you have added the inertia-link component, it should work as expected.

Answer 2

When implementing the Vue3 code snippet provided by inertiajs on their official website:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

You will need to include the Link component like this:

import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .component('inertia-link', Link)
      .mount(el)
  },
});

Once you have added the inertia-link component, it should work as expected.

Answer 3

Answer №2

To begin, ensure that you have installed all the necessary dependencies.

npm install @inertiajs/inertia @inertiajs/inertia-vue

Alternatively, you can use Yarn:

yarn add @inertiajs/inertia @inertiajs/inertia-vue

Get started by initializing your application.

Then, make sure to update your main JavaScript file in order to boot up your Inertia application. Essentially, this step involves setting up the client-side framework with the basic Inertia page component.

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

If you require Code splitting capabilities, you can follow these additional steps:

Answer 4

To begin, ensure that you have installed all the necessary dependencies.

npm install @inertiajs/inertia @inertiajs/inertia-vue

Alternatively, you can use Yarn:

yarn add @inertiajs/inertia @inertiajs/inertia-vue

Get started by initializing your application.

Then, make sure to update your main JavaScript file in order to boot up your Inertia application. Essentially, this step involves setting up the client-side framework with the basic Inertia page component.

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

If you require Code splitting capabilities, you can follow these additional steps:

Answer 5

Answer №3

Dealing with this particular issue drove me to the brink of madness, but I finally cracked the code on it. The culprit turned out to be <inertia-link>, a custom link that Vue attempts to match with a registered component. When Vue fails to find said component, it triggers a warning. Here's the solution to put this problem to rest.

To start, import Link from the Vue adapter of Inertia in your app.js file like so:
```
import { Link } from '@inertiajs/inertia-vue'
```
After importing both Vue and Link, go ahead and register the Link as a component with Vue in the same app.js file:
```
Vue.component('inertia-link', Link)
```

Simply use <inertia-link> in your templates and everything should run smoothly.

PS: Just a heads up, I was utilizing Vue2 at the time.

Answer 6

Dealing with this particular issue drove me to the brink of madness, but I finally cracked the code on it. The culprit turned out to be <inertia-link>, a custom link that Vue attempts to match with a registered component. When Vue fails to find said component, it triggers a warning. Here's the solution to put this problem to rest.

To start, import Link from the Vue adapter of Inertia in your app.js file like so:
```
import { Link } from '@inertiajs/inertia-vue'
```
After importing both Vue and Link, go ahead and register the Link as a component with Vue in the same app.js file:
```
Vue.component('inertia-link', Link)
```

Simply use <inertia-link> in your templates and everything should run smoothly.

PS: Just a heads up, I was utilizing Vue2 at the time.

When utilizing the <inertia-link> tag, the Vue component fails to render

Answer №1

Answer №2

Answer №3

Similar questions

Displaying thousands of records for user selection in C# - A step-by-step guide

What could be the reason for the cardDetails component, which is supposed to display information received via a Vuex action, not appearing

Tips for safeguarding the security of my PHP API when accessed through Ajax using OAuth2

How can I personalize pagination with the reactable library?

What could be causing the error when attempting to utilize the VueFire plugin?

Using VueJS variables within HTML attributes

Add attributes to the top level

What is the process for reloading the helper after modifying the values?

When compiling the UPDATE query, KNEX has detected undefined bindings

Dynamic segments in Vue Router that depend on a predefined list

Storing state or data in React for persistence when users navigate between pages or use the browser's back

The DateFormat.js script encountered an error: Unexpected token export

What is the best way to add an array to my JSON object in Javascript?

Automatically proceed to the following page after the video in the Qualtrics iframe comes to an end

What problems are being caused by this specific way of assigning variables?

How can I dictate the placement of a nested Material UI select within a popper in the DOM?

JavaScript and CSOM updates cause SharePoint list item properties to disappear

Utilizing Vue router: a guide to sending data to the default route

Animate a division with its content to smoothly transition downwards

Using a JavaScript function, transmit information through an Express response