# Using Flo.w RDF with Vue

Vue.js (opens new window) is a JavaScript framework for building web applications. Using Vue.js to build new Flo.w RDF applications is a great choice:

Vue.js is a relatively small framework and easy to learn.
Vue.js is supported by great tooling.
Integration of Flo.w RDF with Vue.js is simple.
Vue and Flo.w RDF share the concept of reactive application state.

The configuration below enables on-demand loading of Flo.w RDF web components when they are first used, improving page load times and minimizing download size.

We recommend using the Vue CLI (opens new window) to create a new project:

# Create a new Vue.js project
vue create my-flowrdf-project

To integrate Flo.w RDF, install the flow-rdf package in your new project directory:

# Install flow-rdf package
cd my-flowrdf-project
npm install flow-rdf

Modify ./src/main.js to initialize the Flo.w RDF library. You will also need to add (or ammend) vue.config.js in your project root folder to copy Flo.w RDF icon assets into your distribution:

import Vue from 'vue'
import App from './App.vue'

// Add Flo.w RDF core css
import 'flow-rdf/dist/flow-rdf/css/core.css';

import { defineCustomElements } from 'flow-rdf/loader';
import { flow } from 'flow-rdf';

// Configure Vue to ignore FLo.w RDF web components
Vue.config.ignoredElements = [/flow-\w*/];
Vue.config.productionTip = false;

// Define Flo.w RDF web components
defineCustomElements();

// Initialize Flo.w RDF context
const context = flow.initializeContext({
  apiKey: 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7',
  enableDebug: process.env.NODE_ENV === 'development'
});

// Initialize Vue app and provide Flo.w RDF to child components
new Vue({
  render: h => h(App),
  provide: { context }
}).$mount('#app');

const CopyPlugin = require('copy-webpack-plugin');
const path  = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyPlugin([{
            // Copy Flo.w RDF assets to dist
            from: path.resolve(__dirname, 'node_modules/flow-rdf/dist/flow-rdf/assets/svg/'),
            to: path.resolve(__dirname, 'public/assets'),
      }])
    ]
  }
}

// Make sure to add code blocks to your code group

The Flo.w RDF context object, which is the entry point for the Flo.w RDF JavaScript API, is provided as a dependency by the root Vue instance in the above code. In the following example, a Vue.js component injects and accesses the Flo.w RDF context.

<template>
  <div>
    <flow-button solid color="primary" icon="fas-cog"
      @click="context.state.set('rdfMsg', 'Clicked!')">Click me!</flow-button>
    <flow-value value="$rdfMsg"></flow-value>
  </div>
</template>

<script>
export default {
  name: 'HelloFlow',
  inject: ['context'],
  created: function() {
    // Access injected Flo.w RDF context
    this.context.state.set('rdfMsg', 'Hello Flo.w RDF!');
  }
}
</script>

<style scoped>
/* Component styles */
</style>

// Make sure to add code blocks to your code group

Note that in the above trivial example, Flo.w RDF reactive application state is used to update the displayed message when the button is clicked. This could be achieved more simply using Vue's own reactive application state.

The developer has the choice of which system to use. However, for full integration of Flo.w RDF components (reactive maps, queries, charts, gauges, data tables etc.) we recommend using Flo.w reactive application state and reserving Vue.js reactive state for simple UI updates such as showing/hiding elements.

← React Theming →