i´m trying to do a component in laravel 9 and vueJS 3. And my component have a datatable and for this i´m using vue-good-table-next but i can´t show it in my blade i don´t know that i´m doing wrong.

in my web browser return this:

[Vue warn]: There is already an app instance mounted on the host container. If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.

in my webpack.mix.js i have this:

mix.js('resources/js/app.js', 'public/js')
            .vue()
            .postCss('resources/css/app.css', 'public/css', [                //
            ]);

in my app.js i have this:

require('./bootstrap');import { createApp } from "vue";import datatableFisios from "./components/datatableFisios.vue";createApp({    components: {
        datatableFisios,
    },
}).mount("#app");

and my component it´s

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows"/>
  </div>
</template>

<script>
    export default {
        name: 'datatableFisios',        mounted(){
            console.log(`The initial count is.`)
        },
        data(){
            return {                
                columns: [
                    {
                        label: 'Name',
                        field: 'name',
                    },
                    {                        label: 'Age',
                        field: 'age',
                        type: 'number',
                    },
                    {                        label: 'Created On',
                        field: 'createdAt',
                        type: 'date',
                        dateInputFormat: 'yyyy-MM-dd',
                        dateOutputFormat: 'MMM do yy',
                    },
                    {                        label: 'Percent',
                        field: 'score',
                        type: 'percentage',
                    },
                ],
                    rows: [
                        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
                        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
                        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
                        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
                        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
                        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
                    ],
                };
        },
    };
</script>

Solution

To resolve my problem i had to update vue-js-loader with this command npm update vue-loader with this i can mount my component and to do my datatable with vue-good-table-next

App has already been mounted. nothing show up when open page again

// main.jsconst app = createApp(App);
app.provide('$axios', axios);window.renderSomething = function() {  

   app.mount('#ticker-maintenance-host');   
        
}

the application is developed with vuejs and blarzor. In blazor, will call it

@inject IJSRuntime JS;

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("renderSomething");
        }
    }
}


@page "/dashboard/page1"

<div id="ticker-maintenance-host"></div>

first open this page1, all the content can show up. If I leave it and come back to this page, nothing show up. There is a warning saying

"[Vue warn]: App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. `const createMyApp = () => createApp(App)`".

How can I fix this warning and make my content show up without refresh when coming back.

You are mounting your App to the ID #ticker-maintenance-host

But all I can see in your HTML is an ID container.

Mount your app to the container, or add the ID #ticker-maintenance-host to your HTML.

#Edit:

You dont need to mount your view app on every render, just when the website is loaded initially.

Something like this straight out of the docs for Vue3 is how you register a vue app:

const { createApp, ref, computed } = Vue;
const app = createApp({
  setup() {
    const someValue = ref(10);
    const someComputed = computed(() => someValue.value * 10);
    return {
      someValue,
      someComputed
    }
  }
});
app.mount("#ticker-maintenance-host");

More reading here: Vue.createApp is not working but Is working with new Vue() method

sorry, has change that ID. but if I change const app = createApp(App); to const app = () => createApp(App). it shows app.provide, app.use and app.mount is not a function. How can write my code here If I change that line code.