jskos-vue

Appearance

Usage ​

Installation ​

bash
npm install jskos-vue

See below for usage in browser.

Requirements ​

For a Node.js project, it is recommended to use Vite. For access to JSKOS data via web APIs we recommend cocoda-sdk.

The library also supports Vue I18n, see I18n (still experimental).

Globally in a Vue project ​

This adds all of jskos-vue's components globally to your Vue project (src/main.js):

js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

import * as JskosVue from "jskos-vue"
app.use(JskosVue)

// Import stylesheet
import "jskos-vue/dist/style.css"

app.mount('#app')

Globally in a Vue project (individual components) ​

This adds individual components (tree-shakable) globally to your Vue project (src/main.js):

js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

import { ItemName } from "jskos-vue"
app.use(ItemName)

// Import stylesheet
import "jskos-vue/dist/style.css"

app.mount('#app')

Locally in a Vue project ​

You can also add individual components where needed (e.g. in some SFC, tree-shakable):

js
import { defineComponent } from "vue"
import { ItemName } from "jskos-vue"
// Import stylesheet
import "jskos-vue/dist/style.css"

export default defineComponent({
  // ...
  components: {
    ItemName,
  },
  // ...
})

Browser ​

The library can be used in the browser, for example via jsDelivr.

Fully working HTML example:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>
    <!-- jskos-vue stylesheet and required libraries (adjust version for updates) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jskos-vue/dist/style.css">
    <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js",
        "jskos-tools": "https://esm.sh/jskos-tools@1.1.2",
        "vue-scrollto": "https://esm.sh/vue-scrollto@2.20.0",
        "jskos-vue-tabs": "https://cdn.jsdelivr.net/npm/jskos-vue-tabs@0.1.8/dist/jskos-vue-tabs.js",
        "jskos-vue": "https://cdn.jsdelivr.net/npm/jskos-vue/dist/jskos-vue.js"
      }
    }
    </script>
  </head>
  <body>
    <div id="app">
      <button @click="scroll('uri:25')">Scroll to 25</button>
      <item-list
        ref="itemList"
        style="height: 100px; overflow-y: scroll; border: 1px solid black; margin-top: 20px;"
        :items="Array.from({ length: 50 }, (v, i) => ({ uri: `uri:${i}`, notation: [`${i}`], prefLabel: { en: `Test ${i}` }}))" />
    </div>
    <script type="module">
      import * as Vue from "vue"
      import * as JskosVue from "jskos-vue" 
      Vue.createApp({
        methods: {
          scroll(uri) {
            this.$refs.itemList.scrollToUri(uri)
          }
        },
      }).use(JskosVue).mount("#app")
    </script>
  </body>
</html>

See examples directory in the git repository of jskos-vue for an additional example.

Localization ​

The library comes with translated messages in English and German. Additional messages can be provided with library Vue I18n or its subset petite-vue-i18n. See test file tests/i18n.test.js for usage.

If Vue I18n is not used, localization is controlled by [jskos-tools] language preferences (function getLanguages and selectLanguage) but there is no way to override or extend translation messages.

Localization of JSKOS itemt content (e.g. labels) is always controlled by jskos-tools language preferences.