Nuxt.js vue-typicalを使ってテキストにエフェクトをかけるサンプル

2024年1月6日

環境
node v12.13.0
npm 6.13.7
Nuxt.js v2.11.0

1.nuxtappという名前でプロジェクトを作成します。

npx create-nuxt-app nuxtapp

2.外部IPを許可します
作成したプロジェクト配下にあるpackage.jsonに下記を追加します。

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3000"
  }
},

3.vue-typicalをインストールする
## 作成したプロジェクトに移動
# cd nuxtapp

## インストール
# yarn add vue-typical

4.plugins配下にplugin.jsを作成し、下記の通りに編集します。

import Vue from 'vue'
import typical from 'vue-typical'
Vue.component('typical', typical)

5.nuxt.config.jsに下記のコードを追加します。

plugins: [
    {
      src: '@/plugins/plugin',
      mode: 'client'
    }
  ],

6.pages配下にindex.vueを編集します

<template>
  <div class="container">
    <div>
      <logo />
      <typical
        class="vt-title"
        :steps="['Hello', 800, 'Hello world!', 600]"
        :wrapper="'h2'"
      ></typical>
    </div>
  </div>
</template>

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

export default {
  name: 'Nuxttest',
  components: {
    Logo
  }
}
</script>
<style>
.container {
  align-items: center;
  text-align: center;
}
</style>

Nuxt.jsを起動します
yarn dev

動作確認

ブラウザから http://プライベートIP:3000にアクセスします