blessed-vue

Because the underlying blessed library does not have a concept similar to the Web DOM, blessed-vue provides a simulated DOM element to mount components.

To initialize your application, you must:

1. Create a placebo element using Vue.dom.createElement().
2. Attach it to the simulated DOM using Vue.dom.append(el).
3. Mount your Vue instance onto that element using $mount(el).

import Vue from 'blessed-vue'

// 1. Create a placebo element
const el = Vue.dom.createElement()

// 2. Attach the placebo element
Vue.dom.append(el)

// 3. Mount the Vue instance
const instance = new Vue({
  // ... config
}).$mount(el)

To run the login form example (which uses Rollup), install the dependencies and start the development server using the following commands:

yarn install
yarn start

The Call Log example demonstrates how to append logs to a terminal interface every second using blessed-vue. This specific example is configured as a webpack2 and vue-loader project and has been updated to use VueX for state management.

To run this example locally, use the following commands:

yarn install
yarn start

Styling in blessed-vue is applied directly to the element and does not cascade like CSS. You can define styles in three ways:

1. Static string style: Use a string for simple definitions. For nested properties like hover or focus, use dot notation (e.g., hover.bg).
2. Array style binding: Pass an array of style objects to :style. This is useful for conditional styling (e.g., [baseStyle, isLoading && loadingStyle]).
3. Object style: Pass a reactive object to :style. This supports nested objects for properties like hover.

<!-- Static string style -->
<box style='bg: white; fg: black; hover.bg: black; hover.fg: white'/>

<!-- Array style binding -->
<box :style="[baseStyle, isLoading && loadingStyle]" />

<!-- Object style -->
<box :style="objectStyle" />

To use blessed-vue in your project, install it using npm:

npm install blessed-vue

If you are using rollup with rollup-plugin-vue, you must configure the htmlMinifier to ensure props and singleton elements are preserved correctly. Set caseSensitive: true and keepClosingSlash: true.

// rollup.config.js
import vue from 'rollup-plugin-vue';

export default {
  entry: 'src/index.js',
  dest: 'bundle.js',
  plugins: [
    vue({
      htmlMinifier: {
        caseSensitive: true, // preserves the case sensitive props
        keepClosingSlash: true // keeps singleton elements working
      }
    })
  ]
};

The Dashboard example demonstrates how to use blessed-vue with blessed-contrib components, specifically showcasing a line graph, LCD display, and a donut chart. This example is built using webpack2 and vue-loader.

yarn install
yarn start

You can determine if a node is a valid blessed-contrib element by checking its type against the blessed-contrib library. The function isContribElement(node) returns true if the node has a type that exists in blessed-contrib and is an instance of that specific contrib component.

// Example usage concept
isContribElement(node);

The Vue instance exports a compile method which is a wrapper around compileToFunctions. This allows you to manually compile a template string into a render function and static render functions.

import Vue from 'blessed-vue';

const { render, staticRenderFns } = Vue.compile('<div>{{ msg }}</div>', { 
  delimiters: ['[[', ']]'] 
}, context);

The isUnknownElement(tag) function identifies whether a tag is considered 'unknown' by the library.

• In a browser environment, it returns true (as terminal elements are not native browser elements).
• In a non-browser (Node.js) environment, it returns true if the tag is not a reserved blessed or blessed-contrib tag.

// Returns true if the tag is not in the blessed or contrib reserved lists (in Node)
isUnknownElement('my-custom-tag'); 

The blessed-vue package exports a modified Vue constructor that extends the standard Vue prototype to support template compilation within the blessed terminal environment. You can use it by importing the default export and calling new Vue(options).

import Vue from 'blessed-vue';

const app = new Vue({
  template: '<div>Hello {{ name }}</div>',
  data: {
    name: 'World'
  }
});

app.$mount('some-selector');