Vue 3 Getting Started

Revogrid provide special wrapper based on stenciljs vue3 adapter. Just import it to your project and it can be used as part of vue3 system.

Installation

npm

npm i @revolist/vue3-datagrid

pnpm

pnpm add @revolist/vue3-datagrid

yarn

yarn add @revolist/vue3-datagrid

bun

bun add @revolist/vue3-datagrid

Usage

App Composition Api

<template>
  <VGrid :columns="columns" :source="rows" />
</template>

<script setup>
import { ref } from "vue";
import VGrid from "@revolist/vue3-datagrid";
const columns = ref([
  { prop: "name", name: "A" },
  { prop: "details", name: "B" },
]);
const rows = ref([
  {
    name: "1",
    details: "Item 1",
  },
]);
</script>

App Options Api

<template>
  <div id="app">
    <v-grid
      theme="compact"
      :source="rows"
      :columns="columns"
    />
  </div>
</template>
 
<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Getting Started with Options API

Source code Git Codesandbox

vue.sample.options.example.vue

<template>
    <div id="app">
        <RevoGrid
            hide-attribution
            :source="rows"
            :columns="columns"
            :theme="isDark ? 'darkCompact' : 'compact'"
        />
    </div>
</template>

<script>
import { useData } from 'vitepress'
import RevoGrid from '@revolist/vue3-datagrid'
export default {
    name: 'App',
    data() {
        return {
            columns: [
                { prop: 'name', name: 'First' },
                { prop: 'details', name: 'Second' },
            ],
            rows: [
                {
                    name: '1',
                    details: 'Item 1',
                },
            ],
            isDark: useData().isDark,
        }
    },
    components: {
        RevoGrid,
    },
}
</script>

Method on component is not a function

In order to access a method on a Stencil component in Vue, you will need to access the underlying Web Component instance first:

// ✅ This is correct
myComponentRef.value.$el.someMethod();

// ❌ This is incorrect and will result in an error.
myComponentRef.value.someMethod();