I’m trying to install vue3-easy-data-table for my nuxt 3 project. However the documentation doesn’t really have a guide on nuxt 3 installation. Does anyone know how to install it? The following steps are what I did for installation but it doesn’t work.
Step 1 : npm install vue3-easy-data-table
Step 2 : create a file called easy-data-table.js in the plugins directory.
Step 3 : added this piece of code in easy-data-table.js
import "vue3-easy-data-table/dist/style.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3EasyDataTable);
});
>Solution :
The configuration would be something like this.
~/plugins/easy-data-table.ts
import Vue3EasyDataTable from 'vue3-easy-data-table'
import 'vue3-easy-data-table/dist/style.css'
export default defineNuxtPlugin( ( nuxtApp ) => {
nuxtApp.vueApp.component( 'EasyDataTable', Vue3EasyDataTable )
} )Usage with basic example.
<template>
<div>
<EasyDataTable
:headers="headers"
:items="items"
/>
</div>
</template>
<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table"
const headers: Header[] = [
{ text: "PLAYER", value: "player" },
{ text: "TEAM", value: "team" },
{ text: "NUMBER", value: "number" },
{ text: "POSITION", value: "position" },
{ text: "HEIGHT", value: "indicator.height" },
{ text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true },
{ text: "LAST ATTENDED", value: "lastAttended", width: 200 },
{ text: "COUNTRY", value: "country" },
]
const items: Item[] = [
{ player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: { "height": '6-2', "weight": 185 }, lastAttended: "Davidson", country: "USA" },
{ player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: { "height": '6-9', "weight": 250 }, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA" },
{ player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: { "height": '6-10', "weight": 240 }, lastAttended: "Texas-Austin", country: "USA" },
{ player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: { "height": '6-11', "weight": 242 }, lastAttended: "Filathlitikos", country: "Greece" },
]
</script>Expected output
Hope that helps!