Nuxt.jsにvue-konvaを追加する

#前提
Nuxt.jsプロジェクトは、すでに作成されていることします。
Nuxt.js 3向けです。

konva、vue-konvaとは

konvaは、HTML5 CanvasのJavaScriptのフレームワークです。
Vue.js向けに、kovaをコンポーネント化したvue-konvaというものがあります。

vue-konvaの追加方法

慣れた方であれば、当たり前で、簡単でしょうが、
初めてだと難しいと思われるので手順を残しておきます。

1. konvaをインストール

nuxt.jsのプロジェクトがあるところでコマンドを実行してください。

npm install vue-konva konva --save

yarnコマンドを使用している場合は下記を実行してください

yarn add vue-konva konva

2. plugins/vue-konva.jsファイルを作成

plugins/vue-konva.js

import Vue from 'vue';
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

3. nuxt.config.jsのpluginsキー内にファイルパスを追加

pluginsと書かれた箇所を見つけて次のように追加してください。

nuxt.config.js

/*
  ** Plugins to load before mounting the App
*/
   plugins: ["~/plugins/vue-konva"],
/*
   ** Nuxt.js dev-modules
*/

4. pages/index.vueに、下記を記述し動作確認

pages/index.vue

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data () {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};
</script>

<style>
</style>

どのコンポーネントに記述しても大丈夫です。

5.ブラウザでアクセスし動作確認

http://localhost:3000 にアクセスし、次のような円が出たら成功です。
（背景の色は、白になっていると思います）

背景の色は、Nuxt.jsのプロジェクトの設定（UIコンポーネントのインストール状況）によって変わります。
私の場合、Nuxt.jsのプロジェクト作成時に、Vuetifyを入れているので黒になってます。

window is not undefindedとエラーメッセージが出たとき

<client-only></client-only> で、囲んでください。
SSR モード だと出てしまいます。

<client-only placeholder="Loading...">
    <v-stage :config="configKonva">
      <v-layer>
        <v-circle :config="configCircle"></v-circle>
      </v-layer>
    </v-stage>
</client-only>

最後に

他のプラグインも、同じ手順で追加可能です。
楽しいNuxt.jsライフを！
ではまた。

参考

https://ja.nuxtjs.org/guide/plugins/
https://konvajs.org/docs/vue/