Error while using table component outside of the Enso ecosystem with Vue 3

[carlo-cocco]

This is a bug | feature request.

Prerequisites

• [X ] Are you running the latest version?
• [X ] Are you reporting to the correct repository? (enso is made of many specialized packages: https://github.com/laravel-enso)
• [ X] Did you check the documentation?
• [X ] Did you perform a cursory search?

Description

When I try to use table component outside of the Enso ecosystem, I have that error:

Uncaught TypeError: this.http is undefined
    init CoreTable.vue:219
    created CoreTable.vue:205

I don't know if that is a component bug or if I'm use it wrongly. I'm using Vue 3, that is my code, as documentation suggest to do:

import Vue from 'vue';
import axios from 'axios';
import Toastr from '@enso-ui/toastr/bulma';
import ToastrPlugin from '@enso-ui/toastr';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { VueTable } from '@enso-ui/tables/bulma';

Vue.component('fa', FontAwesomeIcon);

Vue.use(ToastrPlugin, {
    layout: Toastr,
    options: {
        duration: 3500,
        position: 'right',
    },
});

window.axios = axios;
const App = Vue.createApp({
    components: {
        Toastr,
        ToastrPlugin,
        FontAwesomeIcon,
        VueTable,
        axios,
    },
    data() {
        return {    
        }
    },
    methods: {
    },
    mounted() {
    },
    computed: {
    },
});

App.use(VueTable);

const vm = App.mount("#v_app");

Any help? Thank you in advance.

[aocneanu]

With the new version of Enso UI we gave up using globals like axios, font awesome, toastr, etc. Now we need to pass all props for each component. For components that are used inside Enso we have our wrappers that take care of that Outside Enso you should always provide all the required props. In your case probably :http="axios"

[carlo-cocco]

Thank you, for the 'axios' problem I solved wrapping the vue-table component into another, as the EnsoTable.vue component does. Here's my updated code:

<template>

    <vue-table :path="path" id="myTable" :http="this.axios" @ready="ready = true" ref="table">

    </vue-table>

</template>

<script>
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Toastr from '@enso-ui/toastr/bulma';
import ToastrPlugin from '@enso-ui/toastr';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

import { VueTable } from '@enso-ui/tables/bulma';

export default {
    name: 'EnsoTableComponent',
    components: {
        FontAwesomeIcon,
               VueTable,
               axios,
    },
    props: [

    ],

    data() {
        return {
            ready: false,
            axios,
        }
    },

    methods: {
    },

    mounted () {
    },

    computed: {
        body() {
            return this.ready
                ? this.$refs.table.body
                : null;
        },
        path() {
            return this.$attrs.path
                ?? `/${`api/${this.$route.path}/initTable`
                    .split('/').filter(v => v).join('/')}`;
        },
        slots() {
            return this.ready
                ? this.$refs.table.slots
                : [];
        },
    },
}

Vue.component('fa', FontAwesomeIcon);
Vue.component('vue-table', VueTable);

Vue.use(ToastrPlugin, {
    layout: Toastr,
    options: {
        duration: 3500,
        position: 'right',
    },
});

Vue.use(VueAxios, axios);
Vue.use(VueTable);

</script>

but now I have another problem:

Uncaught TypeError: this.$slots.default is not a function
    render CoreTable.vue:655

Any example code to solve it? Thank you.