Nuxt.js(vue.js)でOnsenに浸かりたい

最近、Webアプリを作るときは専らNuxt.js(Vue.js)を使うことが多いです

爆速でWebアプリが作れるのは勿論のことなによりホットリロードのおかげ開発がしやすいです

さて、今回やってみたのはNuxt.jsにOnsen Uiを導入をしてみました

前々から気になっていたコンポーネントであるOnsen Uiなのですが、とりあえずHello Worldまでできたので導入までを残しておきます

Onsen Uiとは

Onsen UIとはiOSとAndroidの両方のUIに対応したハイブリッドはUIフレームワークです

部品がコンポーネント化されているため、簡単に美しいWebアプリケーションを作ることができます

細かいところは公式サイトを参照してください

HTML5とJavaScriptで美しいハイブリッドアプリを開発。jQuery、AngularJS 1とAngular 2+、React、Vue.jsなどのフレームワークに対応。iOSとAndroid向けクロスプラットフォーム開発。

Onsenの由来として、どうやら日本語が関わっているとのこと

温泉を英訳すると”Hot Spring”といいますが別の言い方をすると”SPA”にもなります

SPA(Single Page Application)と文字列おなじやん!ということで温泉になったということ

SPA -> 温泉 -> Onsen

使おうと思ったきっかけは非常に単純でかわいいと思ったからです

ロゴが温泉マークである他にも名前にOnsenがついているあたりイケてると思いました

Nuxt.jsとOnsenUIでHelloWorld

OnsenUIの説明も終えたのでNuxt.jsへの導入を書いていきます

導入環境

  • Windows 10 64bit
  • yarn 1.15.2

Nuxt.jsの初期化

まずはNuxt.jsを初期化していきます

設定は下記のようにしました

Onsen UIの追加

作成されたnuxt.jsのディレクトリに行きOnsenをインストールします

OnsenUiを使えるようにするためにPluginsに設定ファイルを作ります

/plugins/onsenui.js

nuxt.js.config.jsファイルにonsenui.jsを読み込んでもらえるように追記する

Hello Onsen

実際にOnsenUIを使ってみます

/pages/index.vueを以下のように書き換える

コピペで動くと思います

あとはサーバーを動かすとOnsenUIができています

ボタンを押すとHelloWorldが出てきます

まだOnsenにはどっぷり使っていませんが、いろいろ触ってみていいとこ悪いところあったら記事にしていこうと思います

あと本当の温泉にも入りたいですね・・・

スポンサーリンク