Nuxt 3でElement Plusを使ってみた

https://vuejs-meetup.connpass.com/event/279254/

Transcript

1. 2023-05-18 ムニエル @munieru_jp Nuxt 3で Element Plusを使ってみた © Munieru
2. 2 © Munieru
3. #あの⽇のツイートを表⽰するやつ 3 https://anohi-no-tweet.munieru.app/ © Munieru
4. 主な使⽤技術 • Nuxt 3：フロントエンドフレームワーク • Element Plus：UIフレームワーク • Vitest：テストフレームワーク • nuxt-icon：Iconifyのアイコンを使えるようにするやつ • Vite PWA：PWA化するやつ • Pinia：いわゆるストア • ESLint：JavaScript/TypeScriptの静的解析するやつ • Markuplint：HTMLの静的解析するやつ • date-fns：⽇付操作を楽にするやつ 4 © Munieru
5. Element Plus 5 https://element-plus.org/ © Munieru
6. Element Plusのいいところ 6 • レスポンシブ対応 • ダークモード対応 • コンポーネントが豊富 • i18nサポート（⽇本語対応） © Munieru
7. Element Plusのイマイチなところ 7 © Munieru
8. ダイアログの横幅が⼤きすぎる 8 © Munieru
9. ダイアログの横幅が⼤きすぎる 9 © Munieru .app-dialog { &:not(.is-fullscreen) { width: 600px; max-width: calc(100vw - 8px * 2); } }
10. ダイアログの横幅が⼤きすぎる 10 © Munieru
11. アイコンのリンク⽤のコンポーネントがない 11 © Munieru
12. アイコンのリンク⽤のコンポーネントがない 12 © Munieru <script lang="ts" setup> 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' </script> <template> <a class="app-icon-link" :title="title" :href="href" :target="target" :rel="rel" > <Icon :name="icon" :size="iconSize" /> </a> </template> <style lang="scss" scoped> $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; } </style>
13. アイコンのリンク⽤のコンポーネントがない <AppIconLink icon="mdi:twitter" href="https://twitter.com/munieru_jp" title="Twitter" external /> 13 © Munieru
14. Element Plusを使った所感 • マテリアルデザインではないUIフレームワークの選択肢としてはアリ • 細かい部分はCSSで調整する必要がある • 不⾜しているコンポーネントを⾃作する必要がある 14 © Munieru