feat: reset to Nuxt 3

.github/workflows/nuxtjs.yml

@@ -13,7 +13,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: "20"
       # Pick your own package manager and build script
       - run: yarn install
       - run: npx nuxt build --preset github_pages

.gitignore

@@ -1,87 +1,24 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
+.nitro
+.cache
+dist
 
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
+# Node dependencies
+node_modules
 
-# Service worker
-sw.*
+# Logs
+logs
+*.log
 
-# macOS
+# Misc
 .DS_Store
+.fleet
+.idea
 
-# Vim swap files
-*.swp
+# Local env files
+.env
+.env.*
+!.env.example

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <NuxtLayout>
+    <v-app>
+      <NuxtPage />
+    </v-app>
+  </NuxtLayout>
+</template>

components/MiradorViewer.vue

@@ -0,0 +1,118 @@
+<script>
+import Mirador from 'mirador/dist/es/src/index'
+import {miradorImageToolsPlugin} from 'mirador-image-tools'
+
+let miradorInstance
+
+export default {
+  async asyncData({$axios}) {
+    // 取得先のURL
+    const url = 'https://www.dl.ndl.go.jp/api/iiif/1823865/manifest.json'
+    // リクエスト（Get）
+    const response = await $axios.$get(url)
+  },
+  data() {
+    return {
+      canvas: '',
+    }
+  },
+
+  computed: {
+    miradorViewerOptions() {
+      return {
+        id: 'mirador',
+        windows: [
+          {
+            id: 'known-window-id',
+            manifestId: this.manifestId,
+          },
+        ],
+        window: {
+          allowClose: false,
+          allowMaximize: false,
+          allowFullscreen: true,
+          hideWindowTitle: true,
+        },
+        workspaceControlPanel: {
+          enabled: false,
+        },
+      }
+    },
+  },
+
+  watch: {
+    canvas() {
+      // We create the action first. Note we are using a specified `windowId` here. This could be accessed from the store instead of specifying upfront.
+      const action = Mirador.actions.setCanvas('known-window-id', this.canvas)
+      // Now we can dispatch it.
+      miradorInstance.store.dispatch(action)
+    },
+  },
+
+  mounted() {
+    miradorInstance = Mirador.viewer(this.miradorViewerOptions, [
+      ...miradorImageToolsPlugin,
+    ])
+  },
+
+  beforeDestroy() {
+    miradorInstance.unmount()
+  },
+
+  methods: {
+    zoom() {
+      // Box to zoom to
+      const boxToZoom = {
+        x: 1420,
+        y: 1831,
+        width: 800,
+        height: 1195,
+      }
+
+      const zoomCenter = {
+        x: boxToZoom.x + boxToZoom.width / 2,
+        y: boxToZoom.y + boxToZoom.height / 2,
+      }
+      const action = Mirador.actions.updateViewport('known-window-id', {
+        x: zoomCenter.x,
+        y: zoomCenter.y,
+        zoom: 1 / boxToZoom.width,
+      })
+
+      miradorInstance.store.dispatch(action)
+    },
+  },
+}
+</script>
+<template>
+  <v-container>
+    <h1 class="mb-5">{{ label }}</h1>
+
+    <div class="mb-5">
+      <v-select
+          v-model="canvas"
+          :items="canvases"
+          label="Select Canvas"
+      ></v-select>
+      <v-btn color="primary" @click="zoom">Zoom</v-btn>
+      <v-btn color="primary" @click="zoom">表示方向切り替え</v-btn>
+    </div>
+
+    <div id="mirador" class="mb-10"></div>
+    <v-table>
+      <tbody>
+      <tr v-for="(item, key) in metadata" :key="key">
+        <th>{{ item.label }}</th>
+        <td>{{ item.value }}</td>
+      </tr>
+      </tbody>
+    </v-table>
+  </v-container>
+</template>
+<style>
+#mirador {
+  height: 600px;
+  position: relative;
+  width: 100%;
+}
+</style>