jiahengaa/BeeGridTable

Nuxt Intallation [@jiahengaa - you can extend your README by this description]

Closed this issue · 2 comments

  1. Install
npm i beegridtable
  1. Create plugin plugins/bee-grid-table.ts with content:
import Vue from "vue";
import BeeGridTable from "beegridtable";

import 'beegridtable/dist/styles/beegridtable.css';
//@ts-ignore
import BeeLocale from "beegridtable/src/locale"

Vue.use(BeeGridTable, {
  locale: BeeLocale,
  capture: true,
});
  1. In nuxt.config.js register plugin:
  plugins: [
    {src: '~/plugins/bee-grid-table', ssr: false}
  ],

You can't omit {ssr:false} option and use

  plugins: [
    '~/plugins/bee-grid-table'
  ],

because of you will see error:

Cannot use import statement outside a module

https://stackoverflow.com/questions/64132293/cannot-use-import-statement-outside-a-module-using-nuxtjs

  1. In your component use it:
<template>
  <div>
    <client-only placeholder="Loading...">
      <BeeGridTable :columns="columns" :data="rows"/>
    </client-only>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  computed: {
    columns() {
      return [
        {
          title: "Name",
          key: "name",
          align: "center",
        }
      ]
    },
    rows() {
      return [{name: 'A'}, {name: 'B'}]
    }
  }
})
</script>

Thank you very much for your advice

http://beegridtable.com/install
Has been updated to the installation document, thank you for your help !

image