vue3を使ったweb制作(備忘録)

Vue3を使っていて毎回どう書いたっけとなるので備忘録をまとめていく。

使用するライブラリ
現時点で使用するライブラリとバージョンを記録する。適宜更新する。

ライブラリ名	バージョン
@vueuse/core	10.7.1
pinia	2.1.7
unhead	1.8.9
vue	3.3.11
vue-router	4.2.5

フォルダ構造
フォルダ構造は以下である。適宜更新する。

  src
    ├─App.vue
    ├─main.js
    ├─assets
        └─scss
    ├─components
        └─common
            └─header
            └─footer
        └─page
            └─top
                └─section1
        └─ui
    ├─stores
    ├─router
        └─index.js
    └─views
        └─top
            └─Top.vue
            └─Top.scss

・ページ共通のheaderとfooterをcommonフォルダに格納している。
・components以下のpageにtopページのsectionごとのvue,scssファイルを格納している。
・ページ共通で使用するscss(mixinやfunction等）はassetsフォルダに格納している。

からくれ178

vue3でhead情報を変更したい

unheadなるライブラリがあったのでそちらを使用する。
Nuxt3だと最初から同梱されている。

npm i unhead

App.vueに以下を追加する。

<script setup>
import { createHead } from 'unhead'

createHead()
</script>

viewsに格納されているvueファイルに以下を追加する。

<script setup>
import { useHead } from "unhead";

useHead({
  title: "About",
  meta: [{ name: "description", content: "Learn more about us." }],
});
</script>

応用する

data.js等に変数としてまとめて書いて、それぞれのページごとでheadの情報を出しわければ、ページごとに違うhead情報を持たせられる。
例えばdata.jsに以下のように書く。

export const headData = {
  title: "Karakure178 | Top",
  description: "Karakure178のホームページです。",
  keywords: "Top, ホーム",
};

viewsに格納されているvueファイルに以下のように修正する。

<script setup>
import { useHead } from "unhead";
import { headData } from "./data.js";

useHead({
  title: headData.title,
  meta: [{ property: "og:title", content: headData.title }],
});
</script>

すると、data.jsから変数を使ったhead情報の変更ができる。

参考サイト

unhead公式サイト
 unhead クイックセットアップ

からくれ178

swiperのページネーションの見た目を変えたい

vue3 Composition API setup + swiper Element(11.0.5)を使ってページネーションの見た目を変更する。

ポイントは

registerを使う
part疑似要素を使う

ページネーションを数値にしたい場合は

renderBulletプロパティに関数を入れ込む

<script setup>
import { register } from "swiper/element/bundle";

import "swiper/scss";
import "swiper/scss/navigation";
import "swiper/scss/pagination";

register();

// Swiperのインスタンスが返ってくる
const onSwiper = (swiper) => {
  console.log("swiper", swiper);
};

// スライド位置が変更された時に呼ばれる
const onSlideChange = () => {
  console.log("slide change");
};
</script>

<template>
  <swiper-container
    :pagination="{
      hideOnClick: false,
      renderBullet: (index, className) => {
        return `<span class='${className} workPagination'>${index + 1}</span>`;
      },
    }"
    class="meSwiper"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
  </swiper-container>
  <Explantion />
</template>


<style lang="scss" scoped>
.meSwiper {
  &::part(pagination) {
    background-color: red;
  }
}
</style>

参考サイト

vue3 + swiper + pagination custom sample
Swiper Element (WebComponent)
Shadow DOMを外部からスタイルできる新しい疑似要素「::part()」
Nuxt 3でSwiperを使用する