Nuxt.jsでポートフォリオサイトを作ろう #3: トップ画面の作成

前回の続きです。

画像の保存

staticディレクトリ内にimageディレクトリを作成し、使用する画像を保存します。本記事では「top.jpg」という名前で保存します。

ファーストビューの表示

index.vueの内容を書き換えます。

pages/index.vue

<template>
    <div>
        <Top />
    </div>
</template>

<script>
import Top from '~/components/Top.vue'

export default {
  components: {
    Top,
  }
}
</script>

index.vueでは、Topコンポーネントを呼び出すための処理を記述しています。

今の状態ではTopコンポーネントがないため、ブラウザにはエラーが表示されます。

次にcomponentsディレクトリにTop.vueを作成します。

components/Top.vue

<template>
    <div id="top">
        <v-container
        fluid>
            <v-card
            width="100vw"
            >
            <v-img
            class="white--text align-center text-center font-italic"
            :class="{'headline': $vuetify.breakpoint. smAndDown, 'display-1': $vuetify.breakpoint. mdAndUp}"
            src="/image/top.jpg"
            >
            <p>Sample Portfolio</p>
            </v-img>
            </v-card>
        </v-container>
    </div>
</template>

ブラウザが自動更新されるので、確認してみると、

上のような画面が表示されるのがわかります。

Vuetifyではクラスに指定の文字列を記述することで、さまざまなデザインを実現することができます。

詳細は公式サイトで確認できますので、ご自身で色々カスタマイズしてみてください。

次回はプロフィール画面を作成します。

Nuxt.jsでポートフォリオサイトを作ろう #4: プロフィール画面の作成