TypeScriptで開発しているNuxt.jsのプロジェクトにnuxt-svg-loaderを導入する 🖥

blog.kimizuka.org

テストの仕方を先に記事にしてしまいましたが、nuxt-svg-loaderとTypeScriptの共存のさせ方もまとめておきます。

nuxt-svg-loaderとは

www.npmjs.com

Nuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダーです。

nuxt-svg-loader導入方法

❶ npmからインストール

yarn add -D nuxt-svg-loader

❷ nuxt.config.jsのmodulesに追記

export default {
  /*
  ** Nuxt.js modules
  */
  modules: [
    'nuxt-svg-loader'
  ],
}

❸ index.d.tsに追記

declare module '*.svg' {
  const content: any;

  export default content;
}

これで使えるようになります。



僕は❸を忘れていたので、

TS2307: Cannot find module '~/assets/hoge.svg' or its corresponding type declarations.
    11 | <script lang="ts">
    12 |   import { Component, Vue } from 'nuxt-property-decorator';
  > 13 |   import Hoge from '~/assets/hoge.svg';
       |                     ^^^^^^^^^^^^^^^^^^^
    14 |   
    15 | 
    16 |   @Component({

という感じのエラーが出てました。
hoge.svgはあるのになんでだろう。と思ってましたが、重要なのはCannot find moduleの方ではなく、its corresponding type declarationsの方だったわけです。
index.d.tsを用意すれば万事解決です。