Vue component does not render when I use <inertia-link> tag

Question

When I use I use the <inertia-link> the test.vue child component does not render but it renders if I remove those tags. Any ideas as to what I am doing wrong?

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>

This component is used in another .vue file with <my-test />

This is being done in laravel 8. Also, I have noticed that if I use the <inertia-link> tag in the parent vue then it shows up. So the tag works.

(and I think it is used by the default Jetstream profile pages).

Your :href="#" prop looks off, since that's trying to bind the href property to the evaluation of the expression # which likely throws a syntax error. You should see an error in the dev console saying something similar. — Robert Nubel
If you're not seeing errors for :href="#" (which is not a valid binding), there are likely other errors that are lost to you. I'd try to resolve the log issue first, as the console log is a vital troubleshooting tool. — tony19

Luis Martinez Luis Martinez · Accepted Answer · 2020-09-18T18:50:03

First verify if you have intalled the dependencies

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

or

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

Initialize app

Next, update your main JavaScript file to boot your Inertia app. All we're doing here is initializing the client-side framework with the base 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)

then if you need a Code splitting, follow the next steps https://inertiajs.com/client-side-setup#code-splitting

Vue component does not render when I use <inertia-link> tag

1 Answers