nuxt.jsで使うLPをさくっと作るためのフレームワークを作った

最近nuxt.jsにハマりっぱなしで、今後どんどんnuxt.jsでサイトを作って行くくらいに依存しています。

特にアプリ紹介のサイトやイベントサイトなど少量のページのときはライブラリを組み合わせて作るとサクッとできるので気に入っています。

そんな背景がありまして、よくLPを作るときに使っていた、Froala Design Blocks をnuxt.jsのcomponentに登録してとても簡単なコードの変更でできるものを作りました。

名前はまんまですが froala nuxtです。

froala nuxtとは

froala nuxtは「froala design blocks」を「nuxtjs」に組み込んで瞬時に使えるようにしたテンプレートです。

froala design blocksは170以上のコンポーネントが紹介されているのですが、コードをコピペして使うのがちょっと面倒という問題を抱えていました。

またテンプレートからテキストを書き換えるだけで、サイトは作れるものの、やっぱりカスタマイズしたい気持ちがでてきてそうすると、CSS周りの設計をそれなりに考えないといけなくなります。

しかしfroala nuxtではscoped cssを使っているため、他のコンポーネントに影響せずにラフにCSSを書いていけます。

もちろん自分でオリジナルのコンポーネントを登録して使えるので汎用性もカスタマイズ性もどちらも高いと自負しています。

コンポーネントの確認

どういったコンポーネントが登録されてるかは、スタイルガイドを作っているのでそちらから確認ができます。

スタイルガイド

このスタイルガイドはstorybookで作られています。
実際にコンポーネントを探すときは、気に入ったコンポーネントの番号を覚えておいて読み込むだけです。

コンポーネントはpropsなどの受渡しもしていないので、親に依存せずにカスタマイズできるので気軽に変更できます。

今後の展望

froalaはもともとbootstrapで作られているので、それをbootstrap vue に置き換えたいと考えています。

こちらに差し替えるとJSなども使えるので、新たに登録できるコンポーネントを増やせると考えています。
vue.jsを使う以上、それに合わせたコンポーネントの設計が必要になるので導入しておくことでLPでの使いやすさ、コーポレートサイトでの使いやすさとかも上がると期待しています。

他には業種・媒体向けのテンプレートを用意しておいておくとかも考えています。

なんにせよ自分が使っていかないと更新もしないので、長い目で見守っていただけると嬉しいです。

froala nuxt

この記事を書いた人

conti

大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。
コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。
プロフィール