【メモ】VuesaxとVuetifyの違い

はじめに

ポートフォリオ作成にどっちを使うか検討しているので、違いを調べてみました。

また、両方同時に使用しても大丈夫なのか検証中です。

※個人的なメモです。

公式

Vuesax

vuetifyjs

違い

レスポンシブ面

Vuesax

Vuetify

公式だけだと掴みにくい。。。

こちらの記事がわかりやすく助かりました。

ざっくりまとめると以下の感じの構成になり、そもそもv-flexでグリッドするまえに<v-app>など入れなければいけないタグがあることを今更知りました。

<template>
  <v-app>
    <v-content>
      <v-container>
        <v-layout wrap>
          <v-flex xs12 sm6 md4>コンテンツ</v-flex>
          <v-flex xs12 sm6 md4>コンテンツ</v-flex>
          <v-flex xs12 sm6 md4>コンテンツ</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

比較して

手軽さはVuesaxが勝るけど、コンポーネントをどんどん追加していったらVuetifyの方が規約的なものもあり使いやすいのかなと感じました。

ただ両コンポーネントの書き方に被りのここではないため今のところ両方がっちゃんこしても大丈夫そう。

レイアウトに関して

これはVuetifyにしかないです。

以下から好きに選んで既成レイアウトを簡単に導入できちゃいます。

https://vuetifyjs.com/ja/getting-started/pre-made-layouts/

初めて知ったときはこんなのあるの？？とびっくりしました。

おわりに

随時更新していきます。

BootstrapVueやElementなど他にも気になるUIがありますが、一旦一番使われていそうなVuetifyを使いこなせるようにしたいです。