ESM module import

[dreerr]

We are developing a Nuxt based application for a cultural heritage search portal in Austria. For the details view of the object we want to implement Tify in our web application. In the docs you suggest importing as follows:

tify/README.md

Include both the JavaScript and the stylesheet. [...] Or import TIFY into your web application:

import 'tify'
import 'tify/dist/tify.css'

Unfortunately, we couldn’t find a way to import Tify directly, such as:

import Tify from 'tify' // 🚫 does not work 
// or
import { Tify } from 'tify' // 🚫 does not work

As a result, we have to rely on the onMounted() hook to create a new viewer instance, which is not ideal.

Proper importing would also be great for the locale files, the following Vue example only works in dev, due to the access to the node_modules folder.

<script setup>
import { onMounted } from "vue";
import "tify";
import "tify/dist/tify.css";
import "tify/dist/translations/de.json";
onMounted(() => {
  new Tify({
    container: "#tify",
    manifestUrl:
      "https://manifests.sub.uni-goettingen.de/iiif/presentation/PPN623133725/manifest",
    language: "de",
    translationsDirUrl: "/node_modules/tify/dist/translations/", // 🚫 only works in dev mode
  });
});
</script>
<template>
  <div id="tify" style="height: 100vh"></div>
</template>

Maybe we overlooked a way to get a proper import working, thanks for your support or feedback!

[paulpestov]

Tify is bundling Vue.js itself right now, so it might not work properly within your current Vue.js application. We might have to think about releasing Tify as a reusable component by having a different Vite config where we declare Vue as a external dependency.

[dreerr]

Dear Paul, we did successfully integrate it in our platform Kulturpool at the CHO detail page. Tify is currently displaying over 1 million cultural heritage objects from Austria, from native and non-native IIIF sources in our role as national cross domain aggregator for Europeana.

In order to hide the download button, we had to use CSS, it would be cool to have some basic controls to configure the UI and be able to disable some functions.

[paulpestov]

This looks really good! We are happy that it worked out for you. I opened a separate issue #174 with your suggestion for configurable UI elements. Thanks!

[OSHistory]

We are developing a Nuxt based application for a cultural heritage search portal in Austria. For the details view of the object we want to implement Tify in our web application. In the docs you suggest importing as follows:

tify/README.md

Include both the JavaScript and the stylesheet. [...] Or import TIFY into your web application:

import 'tify'
import 'tify/dist/tify.css'

Unfortunately, we couldn’t find a way to import Tify directly, such as:

import Tify from 'tify' // 🚫 does not work 
// or
import { Tify } from 'tify' // 🚫 does not work

As a result, we have to rely on the onMounted() hook to create a new viewer instance, which is not ideal.

Proper importing would also be great for the locale files, the following Vue example only works in dev, due to the access to the node_modules folder.

<script setup>
import { onMounted } from "vue";
import "tify";
import "tify/dist/tify.css";
import "tify/dist/translations/de.json";
onMounted(() => {
  new Tify({
    container: "#tify",
    manifestUrl:
      "https://manifests.sub.uni-goettingen.de/iiif/presentation/PPN623133725/manifest",
    language: "de",
    translationsDirUrl: "/node_modules/tify/dist/translations/", // 🚫 only works in dev mode
  });
});
</script>
<template>
  <div id="tify" style="height: 100vh"></div>
</template>

Maybe we overlooked a way to get a proper import working, thanks for your support or feedback!

I also managed to integrate Tify in the current version (0.31.0) as the viewer in one of our projects based on Nuxt/Vue. Before we needed to rely on some hack using required to integrate it into our Nuxt application. As Nuxt3 does run by default with vite (and not webpack anymore), resolving the translationDir is possible via a import.meta.url approach (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url):

const viewer = new Tify({
          container: '#tify',
          manifestUrl: 'manifest.json',
          language: 'de',
          translationsDirUrl: new URL("../../node_modules/tify/dist/translations/", import.meta.url).href
});

Hope this helps someone struggling to integration Tify into Nuxt/VueJS applications.

Keep up the good work and cheers :smile: