Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt 3でElement Plusを使ってみた

Munieru
May 18, 2023
1.2k

Nuxt 3でElement Plusを使ってみた

Munieru

May 18, 2023
Tweet

Transcript

  1. 主な使⽤技術 • Nuxt 3:フロントエンドフレームワーク • Element Plus:UIフレームワーク • Vitest:テストフレームワーク •

    nuxt-icon:Iconifyのアイコンを使えるようにするやつ • Vite PWA:PWA化するやつ • Pinia:いわゆるストア • ESLint:JavaScript/TypeScriptの静的解析するやつ • Markuplint:HTMLの静的解析するやつ • date-fns:⽇付操作を楽にするやつ 4 © Munieru
  2. アイコンのリンク⽤のコンポーネントがない 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>