Reusable Javascript and VueJS components for interacting with a Girder server

Reusable Javascript and VueJS components for interacting with a Girder server

Girder web component library .Reusable Javascript and VueJS components for interacting with a Girder server

Girder web component library

Try the demo app. It works with data.kitware.com.

Usage Quickstart

Installation

npm install @girder/components
# or
yarn add @girder/components

VueCLI is required for building applications with Girder web components. However, a few additional packages must still be manually installed:

npm install -D sass [email protected]^7.3.1 vue-cli-plugin-vuetify vuetify-loader
# or
yarn add -D sass [email protected]^7.3.1 vue-cli-plugin-vuetify vuetify-loader

Note: If you are building with custom webpack (without vue-cli-service), you should follow Vuetify's Webpack install instructions

Initialization

Encapsulating the configuration in another file (typically src/plugins/girder.js) is a good practice.

/* src/plugins/girder.js */
import Vue from 'vue';
import Girder, { RestClient } from '@girder/components/src';

// Install the Vue plugin that lets us use the components
Vue.use(Girder);

// This connects to another server if the VUE_APP_API_ROOT
// environment variable is set at build-time
const apiRoot = process.env.VUE_APP_API_ROOT || 'http://localhost:8080/api/v1';

// Create the axios-based client to be used for all API requests
const girderRest = new RestClient({
  apiRoot,
});

// This is passed to our Vue instance; it will be available in all components
const GirderProvider = {
  girderRest,
};
export default GirderProvider;

Reference the configuration from your application initialization (typically src/main.js):

/* src/main.js */
import GirderProvider from '@/plugins/girder';
import { vuetify } from '@girder/components/src';

// ...

new Vue({
  provide: GirderProvider,
  // Import and use vuetify config from girder/components without modification
  // See below for how to inject your own config
  vuetify,
  // ...
}).$mount('#app');

Using Components

Components should be imported by name from @girder/components/src/components, as this location will be stable across releases. For instance:

import { Upload as GirderUpload } from '@girder/components/src/components';  // Good
import GirderUpload from '@girder/components/src/components/Upload.vue'; // Unsafe -- may move in future

Since Girder web components uses Vuetify, your application must provide v-app and v-content containers at some ancestor level.

For example, to create a login / registration widget in src/App.vue:

<!-- src/App.vue -->
<template>
  <v-app>
    <v-content>
      <h1>Welcome {{ currentUserLogin }}</h1>
      <GirderAuthentication register />
    </v-content>
  </v-app>
</template>

<script>
import { Authentication as GirderAuthentication } from '@girder/components/src/components';

export default {
  components: {
    GirderAuthentication,
  },

  // Injecting is not necessary to use the component,
  // but is required to access the results of API calls
  inject: ['girderRest'],
  computed: {
    currentUserLogin() {
      return this.girderRest.user ? this.girderRest.user.login : 'anonymous';
    },
  },
};
</script>

See the demo app for a more comprehensive example.

Advanced Usage

Customizing Vuetify Configuration

If your downstream application is also using Vuetify and needs to pass additional configuration options, it must be careful to coordinate with Girder web components.

Additional Vuetify configuration should inherit from Girder web components' own configuration:

import { merge } from 'lodash';
import { vuetifyConfig as girderVuetifyConfig } from '@girder/components/src/utils';

const appVuetifyConfig = merge(girderVuetifyConfig, {
  icons: {
    values: {
      myCustomIcon: 'mdi-custom-icon'
    }
  }
});

Note: You must use the mdi icon pack. Icon packs cannot be mixed.

import Vuetify from 'vuetify/lib';
new Vue({
  provide: GirderProvider,
  vuetify: new Vuetify(appVuetifyConfig),
}).$mount('#app');

Note: Girder web components imports a-la-carte vuetify/lib, so you should do the same to avoid building duplicate dependencies into your artifacts.

Other installation methods

It's not necessary to install Girder web components yourself, you can import the prebuilt bundle into your page by including the following tags:

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/@girder/components"></script>
<link rel="stylesheet" href="https://unpkg.com/@girder/components/dist/girder.css">

This will expose all the library's components under the global variable girder, e.g. girder.components.Upload.

Note: If importing this library's UMD bundle via a <script> tag, the incantation for installing the Vue plugin is slightly different:

Vue.use(girder.default);

For developers

# Project Setup
yarn

# Compile and hot-reload for development
yarn serve

# Build the library for production
yarn build

# Lint and fix source code
yarn lint

# Run unit tests
yarn test:unit

Use an external Girder API

To build the demo app against an external Girder API, set the VUE_APP_API_ROOT environment variable. For example:

export VUE_APP_API_ROOT=https://data.kitware.com/api/v1
yarn serve

This variable value defaults to http://localhost:8080/api/v1 for normal development (which assumes the developer has a local instance of the Girder API server running). When running against your own instance of the Girder API server, make sure to set CORS accordingly.

Displaying private media from Girder on a page

If your app injects media dynamically into the page using img or video elements that load from Girder, there are several requirements.

  • You must use the authenticateWithCredentials option in the GirderRest constructor.
  • You must modify Girder's CORS allowed origin settings to match your app's origin exactly. You can use a comma-separated list to match multiple origins, for example *, http://localhost:8080, https://myapp.domain.com
  • To interact with the loaded element data from a canvas or JS, you may need to add the crossOrigin attribute to the media element.

Deploy and Publish

The demo app is automatically deployed to https://gwc.girder.org

Any contributor can request an update to the published npmjs version by changing the version string in package.json and opening a pull request. Our CI runner will detect the change and publish on merge. Version update PRs should generally happen independently of feature PRs.

Download Details:

Author: girder

Demo: https://gwc.girder.org/

Source Code: https://github.com/girder/girder_web_components

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.