# Vue Vue

npm version (opens new window) npm downloads (opens new window) Github issues (opens new window) Github repo (opens new window)

ActiveWidgets Datagrid for Vue.

ATTENTION!

This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license (opens new window) for each developer in your team before including this package in your application.

The library is available as an NPM package and over ActiveWidgets CDN.

> npm install --save @activewidgets/vue

# NPM package

The main module exports individual ActiveWidgets component classes and a components object map for easy registration with Vue.

import { Datagrid } from "@activewidgets/vue";

The css files are imported as dependencies - your bundler/build script should be configured to process css imports.

# Separate JS, CSS

If you build js and css separately - use @activewidgets/vue/js and @activewidgets/vue/css modules.

import { Datagrid } from "@activewidgets/vue/js";  // code
import "@activewidgets/vue/css";  // stylesheets

# Bundle

There is also a bundle module, which includes stylesheets as a string inside the javascript code and automatically injects them as a <style> tag into the page <head>.

import { Datagrid } from "@activewidgets/vue/bundle";

This is the simplest if your build script does not like css imports.

For quick prototyping the package is also availble over ActiveWidgets CDN -

<script src="https://cdn.activewidgets.com/vue"></script>

or, if you prefer separate js/css -

<link href="https://cdn.activewidgets.com/vue/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/vue/ax.js"></script>

which redirect to the latest version -

<script src="https://cdn.activewidgets.com/vue@3.0.0/bundle.js"></script>
  or
<link href="https://cdn.activewidgets.com/vue@3.0.0/ax.css" rel="stylesheet" />
<script src="https://cdn.activewidgets.com/vue@3.0.0/ax.js"></script>

Use ActiveWidgets.Vue global namespace with CDN packages.

const { Datagrid } = ActiveWidgets.Vue;

# Components

Export Description
Datagrid Datagrid component
Row Row component

# Other exports

The package also exports components map in the form of

const components = {
    'ax-datagrid': Datagrid,
    'ax-row': Row
};

← @activewidgets/options →