Month: January 2023

Vue3 + Viteでmaterial iconを使う

みんな大好きmaterial design icon(マテリアルアイコン) をVue3とViteの環境で使ってみたので、その備忘録。

Vite .config.jsに追記するのかと思っていたら、不要でした。
やり方は全部こちらに書いてありますが、一応。

https://www.npmjs.com/package/vue-material-design-icons

アイコンはこちらから探せます。

https://materialdesignicons.com/

インストール

npm i vue-material-design-icons

yarnの場合

yarn add vue-material-design-icons

インポート

import MenuIcon from 'vue-material-design-icons/Menu.vue';

components: {
  MenuIcon;
}

グローバルの場合

import MenuIcon from 'vue-material-design-icons/Menu.vue';

Vue.component('menu-icon', MenuIcon);

描画

<menu-icon />

Nuxt.jsでスクロールアニメーションを入れる- ライブラリ Animated on Scroll (AOS)

明けましておめでとうございます。

フロントエンドエンジニアリングを勉強する前はjQuery多用ユーザーだったので、VueではjQuery使わないの？えっじゃあアニメーションとかコーディングしなきゃいけないの！？と慌てふためく脆弱エンジニアでした。VueやNuxtではライブラリが充実しているんですね〜ありがたやありがたや。

というわけで、今回はNuxt.jsにスクロールアニメーションを実装します。ライブラリで。（倒置法）

参考サイト
https://michalsnik.github.io/aos/
https://zacheryng.com/nuxt-with-animated-on-scroll/

npm install aos --save

グローバルに使いたいので@/plugins/aos.jsに導入。

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

Vue.use(
  AOS.init({
    once: true,
    disable: window.innerWidth < 640,
    duration: 750,
    easing: 'ease-out-quart',
  })
)

nuxt.configに追記

plugins: [
    { src: "@/plugins/aos", mode: "client" },
  ],
purgeCSS: {
    whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}

描画。（vuetify使っているのでplacementValいらなかったです…）

            <v-item-group>
              <v-row>
                <v-col v-for="item in serviceItems" :key="item.name">
                  <v-item
                    :data-aos="`${item.motionVal}`"
                    :data-aos-anchor-placement="`${item.placementVal}`"
                  >
                    <v-card
                      height="200"
                      class="d-flex align-center top_services_item"
                      >{{ item.name }}</v-card
                    >
                  </v-item>
                </v-col>
              </v-row>
            </v-item-group>
<script>
export default {
  data() {
    return {
      serviceItems: [
        {
          name: 'item1',
          contents: 'ここに説明が入ります。',
          placementVal: 'top-center',
          motionVal: 'fade-up',
        },
        {
          name: 'item2',
          contents: 'ここに説明が入ります。',
          placementVal: 'center-center',
          motionVal: 'fade-down',
        },
        {
          name: 'item3',
          contents: 'ここに説明が入ります。',
          placementVal: 'bottom-center',
          motionVal: 'fade-up',
        },
    }
  },
}
</script>