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

はじめに

コジマです。

.vueファイルは

の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の下のフォルダ構造は以下のよう。

さいごに

今回のポイントはこちら

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

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

以上、コジマでした。