Nuxt 3 (vite) で SVG を import する方法
Published: 2023/2/21
Nuxt 3 ではビルドツールが Webpack から Vite (デフォルト) に変わったこともあり、リソースのバンドリングに関係するミドルウェアたちにおいて、 Nuxt 2 では動いていたが Nuxt 3 では (Vite 前提では) 未だ動いていないようなケースがわりかしあったりする。
SVG を Vue コンポーネント上で import できるようにするためのパッケージである、 @nuxtjs/svg
のパッケージもその一つであり、以下の issue にある通り、 Nuxt 3 (Vite) ではまだ動かない。
Not work on nuxt 3 · Issue #86 · nuxt-community/svg-module
github.com
Nuxt 3 で SVG を扱いたくなったので、それについて調べたメモ。
やりたいこと
SVG を import する場合、ユースケースはおそらく以下の 3 つ。
- SVG をファイルとして指定する。import すると svg ファイルもビルドされ、 program 上から得られる値は、その生成された path の文字列となる。
- SVG の中身を文字列として読み込む。それを
v-html
で<svg>
タグとして埋め込んだり、 Data URL に変換してsrc
する。 - コンポーネントとして読み込む。コンポーネントは
render
されるとソースとなった<svg>
のタグを出力する。
どれを使いたいかはケースバイケースではあるが、基本的に、実現したい要件によってどれが適切かは決まってくるため、ミドルウェアとして導入する場合には、これらすべてのユースケースが実現できるようなものであることが望ましい。
この観点でライブラリを選定した。
vite-svg-loader
上記のやりたいことを実現できるライブラリは、現時点では vite-svg-loader
のみがこれに該当する。
設定方法としては、このパッケージを package.json
に追加し、インストールした上で、以下を nuxt.config.ts
に追加する。
import svgLoader from "vite-svg-loader"
export default defineNuxtConfig({
vite: {
plugins: [
svgLoader()
]
}
})
この上で、 SVG を import する際に、以下のように URL の指定を行う。
import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg' に解決
import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...' (中身の文字列)に解決
import IconComponent from './my-icon.svg?component'
// <IconComponent /> として利用できる component に解決
Tags: nuxtnuxt3vite
関連記事
useAsyncData とそれを実現する Nuxt 3 の非同期処理の機構
2022/9/16
Nuxt Content V2 は Nuxt Bridge では動かない
2022/8/13
Mismatching childNodes vs. VNodes の原因と対処
2022/6/21