Nuxt 3でElement Plusを使ってみた

by Munieru

Slide 1

Slide 1 text

2023-05-18 ムニエル @munieru_jp Nuxt 3で Element Plusを使ってみた © Munieru

Slide 2

Slide 2 text

2 © Munieru

Slide 3

Slide 3 text

#あの⽇のツイートを表⽰するやつ 3 https://anohi-no-tweet.munieru.app/ © Munieru

Slide 4

Slide 4 text

主な使⽤技術 ● Nuxt 3：フロントエンドフレームワーク ● Element Plus：UIフレームワーク ● Vitest：テストフレームワーク ● nuxt-icon：Iconifyのアイコンを使えるようにするやつ ● Vite PWA：PWA化するやつ ● Pinia：いわゆるストア ● ESLint：JavaScript/TypeScriptの静的解析するやつ ● Markuplint：HTMLの静的解析するやつ ● date-fns：⽇付操作を楽にするやつ 4 © Munieru

Slide 5

Slide 5 text

Element Plus 5 https://element-plus.org/ © Munieru

Slide 6

Slide 6 text

Element Plusのいいところ 6 ● レスポンシブ対応 ● ダークモード対応 ● コンポーネントが豊富 ● i18nサポート（⽇本語対応） © Munieru

Slide 7

Slide 7 text

Element Plusのイマイチなところ 7 © Munieru

Slide 8

Slide 8 text

ダイアログの横幅が⼤きすぎる 8 © Munieru

Slide 9

Slide 9 text

ダイアログの横幅が⼤きすぎる 9 © Munieru .app-dialog { &:not(.is-fullscreen) { width: 600px; max-width: calc(100vw - 8px * 2); } }

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

アイコンのリンク⽤のコンポーネントがない 12 © Munieru const props = defineProps<{ external?: boolean href: string icon: string title?: string }>() const target = props.external ? '_blank' : undefined const rel = props.external ? 'noreferrer noopener' : undefined const iconSize = '24px' $size: 48px; $icon-size: v-bind(iconSize); .app-icon-link { border-radius: 50%; color: unset; display: inline-block; padding: calc(($size - $icon-size) / 2); text-decoration: none; }