「Java Script」カテゴリーアーカイブ

Cannot find module ‘#app’ or its corresponding type declarations. と言われたら

エラー内容

Cannot find module '#app' or its corresponding type declarations.

というエラーが、Nuxt Bridge(TypeScript)の開発時に、VS Codeで発生。

例えば、このようなコードでエラーが発生する

import { readonly, useState, Ref } from '#app'

動作環境

Nuxt Bridgeの導入環境

  • node 16.13.1
  • npm 8.1.2
  • nuxt-edge 2.16.0
  • @nuxt/bridge 3.0.0
  • Type Script 4.6.2
  • Visual Studio Code 1.65.2
  • Volar 0.33.2

解決策

tsconfig.jsのpathsを以下の様に修正

"paths": {
  "~/*": ["./*"],
  "@/*": ["./*"],
  "#app": ["./node_modules/@nuxt/bridge/dist/runtime/index.d.mts"]
},

原因

nuxiが生成する.nuxt/tsconfig.jsonで設定される#appのパスが、TypeScript用のファイルに通っていないのが原因の模様。

"#app": [
  "node_modules/@nuxt/bridge/dist/runtime/index"
],

Nuxt(Vue)のコンポーネントから環境変数を使う方法

サンプルコード

NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'
export default {
    computed: {
        img: () => {
            return (
                process.env.NUXT_ENV_IMG_URL + "foo.png"
            );
        },
    }
}

解説

Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。

コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。

公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

Nuxt.jsでBodyタグにクラスを指定する方法

サンプルコード

export default {
    // ...
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'something',
        htmlAttrs: {
            lang: 'en'
        },
        bodyAttrs: {
            class: 'hoge-class'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    //...
}

解説

Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。

FullCalendar v5.xで曜日表記を変える方法

FullCalendarが5.xへバージョンアップした際に、いくつかのAPIが廃止されて、新しい設定方法が必要になっている。曜日の表記方法の指定の仕方も、変更されている。

曜日表記の指定方法

曜日を設定するには、dayHeaderFormatという設定項目に、ファンクションを渡す。

dayHeaderFormat: function (date) {
    const days = ["日", "月", "火", "水", "木", "金", "土"];
    return days[date.date.marker.getDay()];
},

daysという配列に、日曜からの表示したい文字列を入れていく。このメソッドに、渡されるdataの中に、該当の日付情報が入ってくるので、その中から何曜日かをdate.date.marker.getDay()から取得し、キーとして配列から文字列を取得し、返すようにする。

Nuxt.jsでFullCalendarを使う方法

コンポーネント

Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。

<template>
    <div>
        <FullCalendar :options="config" >
    </div>
</template>

Vuexとの連携

Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。

例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。

    computed: {
        config() {
            return {
                ...this.configOptions,
            };
        },
        configOptions() {
            return {
                firstDay: 1,
                editable: false,
                navLinks: false,
                selectable: false,
                events: this.events,
                weekends: this.weekendsVisible,
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialView: "dayGridMonth",
            }
        }
        //...
        ...mapGetters("events", ["events"]),
   }

詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects

D3.jsでUTCの0時を取得する方法

Ver.3.xと最新のVer.6.xで違いがあったのでメモ

Ver.6.x

const now = new Date();
const midnight = d3.utcDay.floor(now);

Ver 3.x

const now = new Date();
const midnight = d3.time.day.utc.floor(now);

APIの使用が変わったらしく、最新バージョンでは、d3.time.*は使えない

terser-webpack-pluginを使う

NPMインストール

$ npm install terser-webpack-plugin --save-dev

webpack.config.js

ライブラリの読み込み

const TerserPlugin = require('terser-webpack-plugin');

プラグインの読み込み

module.exports = {
//module.exports = ( env, argv ) => ({
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Vueで、Vimeoのプレイヤーを埋め込む方法

Vimeoプレイヤーのインストール

$ npm install -D @vimeo/player

.vueファイル

<template>
    <iframe
        src="https://player.vimeo.com/video/vimeoid"
        width="640"
        height="360"
        frameborder="0"
        allowfullscreen
    ></iframe>
</template>

※vimeid部分は任意で指定

<script>
import Player from "@vimeo/player";

export default {
    mounted: function() {
        var iframe = document.querySelector("iframe");
        var player = new Player(iframe);

        player.on("play", function() {
            console.log("Played the video");
        });

        player.on("ended", function() {
            console.log("Ended the video");
        });

        player.getVideoTitle().then(function(title) {
            console.log("title:", title);
        });
    }
};
</script>

モジュールのインポート

import Player from "@vimeo/player";

Vimeoプレイヤーへのアクセス
<iframe>タグからSDK経由でプレイヤーを取得する

var iframe = document.querySelector("iframe");
var player = new Player(iframe);

イベントの設定とメソッド実行

player.on("play", function() {
    console.log("Played the video");
});

player.on("ended", function() {
    console.log("Ended the video");
});

player.getVideoTitle().then(function(title) {
    console.log("title:", title);
});