# Vue Vue

npm version npm downloads Github issues Github repo

ActiveWidgets Datagrid for Vue.


This package requires dependencies under ⚠️ FREE TRIAL/COMMERCIAL license. You have to purchase a license 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>
<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