【Nuxt.js】HTML,CSS,JavaScriptを違うファイルから読み込みたい

【Nuxt.js】HTML,CSS,JavaScriptを違うファイルから読み込みたい

はじめに

コジマです。

.vueファイルは

  • templateタグ:HTML部分
  • scriptタグ:JavaScript部分
  • styleタグ:CSS部分

の3つのタグで構成されています。

.vueファイル一枚で完結できるのはそれはそれで便利なんですけど、
役割ごとにファイルを分散させたくもなります。

そういうときの方法を紹介します。

参考URL

参考URLは以下
Vue Component の仕様
ソースのコンポーネントってところ。

Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:

  • Vue 2
  • Vue Router
  • Vuex(ストアオプションを利用している場合に限る)
  • Vue Server Renderer(mode: ‘spa’ を利用している場合を除く)
  • vue-meta

すべて合わせてもわずか 57kB min+gzip です。(Vuex 利用時は 60kB)

バンドルやソースコードの分割やミニファイ化するために内部で webpack、vue-loader と babel-loader を使います。


はじめに(Nuxt.js公式ドキュメント)
より引用

Nuxt.jsに同梱されているvue-loaderの機能の話になるので、vue-loaderを使う人も見て損はないです。

1つのファイルで書くとき

<template>
  <b-container>
    <div class="hello">
      {{ message }}
    </div>
  </b-container>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style>
.hello {
  color: red;
  font-weight: bold;
}
</style>

こうやって赤い文字でHello Worldするだけのシンプルなもの。

これを
index.vueに加え、template.html,style.css,main.jsというファイルにわけて実装できるようにしたいと思います。

やりかた

各タグにsrcオプションをつけてファイルを指定します。

それだけ!(簡単だね!)

変更したソースは以下のようになります。

index.vue

<template src="./template.html">
</template>

<script src="./main.js">
</script>

<style src="./style.css">
</style>

template.html

<b-container>
  <div class="hello">
    {{ message }}
  </div>
</b-container>

style.css

.hello {
  color: red;
  font-weight: bold;
}

main.js

export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}

このようになります。
チーム開発の時なんかはそれそれ作業フォルダが違うと思うので、相対パスの方が親切だと思います!

pagesの下のフォルダ構造は以下のよう。

さいごに

今回のポイントはこちら

  • src属性でファイルを指定する
  • タグの中身を指定したファイルに移動する
  • 相対パスの方が親切(多分)

僕はmain.jsを作らないで、index.vueの中で書いてますが、
今回はこの記事のためにあえて外部ファイル指定としてみました。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


未分類カテゴリの最新記事