📘

【Nuxt】静的htmlファイルの読み込み、出力

2022/12/26に公開約700字

与件

  • サーバー内のhtmlファイルを読み込む
  • htmlをページ上に出力する

コード

script

setup (props) {
  const html = ref(null)
  fetch('htmlファイルのURL')
    .then(response => response.text())
    .then((text) => {
      html.value = text
    })
  })
return {
  html
}

処理は以下のような流れです。

  1. fetchメソッドを使用して、URLからHTMLファイルを取得。
  2. response.textメソッドを使用して、テキストデータとして取得。
  3. テキストデータをhtml.valueプロパティへ代入して、HTMLファイルの内容を表示します。

https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/pages-fetch/

template

<div v-html="html" />

v-htmlでバインディングして出力します。

https://v3.ja.vuejs.org/api/directives.html#v-html

Discussion

ログインするとコメントできます