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

admin管理员组

文章数量:1405369

When I use I use the <inertia-link> the test.vue child ponent 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 {

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

This ponent 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).

When I use I use the <inertia-link> the test.vue child ponent 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 {

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

This ponent 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).

• javascript
• vue.js
• vuejs2
• vue-ponent
• inertiajs

Share Improve this question Follow edited Sep 18, 2020 at 18:54 matt asked Sep 18, 2020 at 18:34 mattmatt 2,1071818 silver badges4646 bronze badges 7

• Is inertia-link globally registered? Any console errors? – tony19 Commented Sep 18, 2020 at 18:45
• 1 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 Commented Sep 18, 2020 at 18:45
• @tony19 yes. It is part of the laravel 8. Installation – matt Commented Sep 18, 2020 at 18:50
• @RobertNubel no errors. – matt Commented Sep 18, 2020 at 18:51
• 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 Commented Sep 18, 2020 at 18:54

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

if you are using the below code for Vue3 from inertiajs office site:

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)
  },
})

then u have to add the Link ponent like so:

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)
      .ponent('inertia-link', Link)
      .mount(el)
  },
});

after that inertia-link ponent should work should work.

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 ponent.

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./client-side-setup#code-splitting

I had this issue and it almost made me crazy. This is how I figured it out. <inertia-link> is a custom link and Vue tries to find if it corresponds to a registered ponent. If Vue does not find the mponent it flags the warning Here is what you need to do to resolve this issue.

• Import Link from Vue adapter of Inertia like this in your app.js

  import { Link } from '@inertiajs/inertia-vue'

• Register the Link as a ponent with Vue after you have imported both Vue and Link like this in your same app.js

  Vue.ponent('inertia-link', Link)

Try in your templates and should work fine.

PS:- I was using Vue2

本文标签： javascriptVue component does not render when I use ltinertialinkgt tagStack Overflow