VEXT

VEXT is a Vue component library to add externalization capabilities to any Vue application, primarily intended to be used visual analytics systems implemented with Vue.

Documentation

Documentation can be found at https://arielmant0.github.io/vext/.

Installation

To use this package, simply install it via yarn or npm.

using yarn:

yarn add @nullbuild/vext

using npm:

npm install @nullbuild/vext

Dependencies

These dependencies are required to use VEXT, but declared as external when building the project, i.e. they are not included in the bundle.

• Vue
• Vuetify
• VueUse
• Pinia
• fabric.js
• vue-json-pretty
• jsPDF
• JSZip
• html2canvas
• FileSaver.js

Usage

To use the components provided by VEXT, you need to register the plugin and make sure that all Vuetify components used by the plugin (see here) are actually provided. For more information see treeshaking.

Here is a simple example, starting off from an essentials vuetify application:

// src/plugins/index.js

import { loadFonts } from './webfontloader'
import vuetify from './vuetify'
import pinia from '../store'
import router from '../router'
import { createVextPlugin } from '@nullbuild/vext'

import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css';

export function registerPlugins (app) {
  loadFonts()
  app
    .use(vuetify)
    .use(router)
    .use(pinia)
    .component("vue-json-pretty", VueJsonPretty) // add the VueJsonPretty component
    .use(createVextPlugin())                     // add VEXT components
}

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

import { createVuetify } from 'vuetify'

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components: components, // necessary so that all components are included
  directives: directives,  // necessary so that all directives are included
})

Here is an example on how to use the stores in a Vue component. This code uses the state store and manually sets the state (once).

// src/components/MyComponent.vue
<script setup>
import { useVextState } from 'vuetify'

const mystateobject = {
  key0: ...,
}

const vextState = useVextState();
vextState.setData(mystateobject);

</script>

Vuetify Components and Directives

Components:

• VBtn
• VSlider
• VTextField
• VIcon
• VDialog (+ related components)
• VCard (+ related components)
• VItemGroup (+ related components)
• VList (+ related components)
• VHover
• VContainer
• VRow
• VCol

Directives:

• Ripple