Vue&Nuxt

Vue3+Vite+Piniaで計算アプリ作ってみたメモ

by

陰陽師のマラソン中手持ち無沙汰だったから表題の構成でマラソン用ポイント計算アプリつくってみた。

https://onmyojigame-emaki.vercel.app/

https://github.com/Tenderfeel/onmyojigame-emaki

最初はNuxt3で作ってみてたんだけど、Codepenの落書きがLocalStorage利用してたために、現状SSRしかないNuxt3だといささか面倒なことになるので諦めてVue3+Viteに切り替えた。という経緯がある。

続きを読む

Vercel+Nuxt.jsで爆速Webアプリ作成

by

CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK）
create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。

いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。

続きを読む

[Nuxt.js] core-jsエラーへの対処

by

何かしら外部のライブラリを追加したときこんな感じのエラーが出ることがある

ERROR in ./.nuxt/client.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
 @ ./.nuxt/client.js 4:0-41
 @ multi ./.nuxt/client.js

ERROR in ./.nuxt/utils.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
 @ ./.nuxt/utils.js 2:0-41
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

コンソールが真っ赤に染まってびっくりするよ😩

続きを読む

CodeSandboxがNuxt.jsに対応してたからNowデプロイまでやってみたら数分で終わって凄かった話

by

全くCodeSandboxについて知らない人は前に書いたCodeSandboxとNow(ZEIT)で爆速Webアプリ作成 を読むといいかもしれない。

陰陽師の周回中手持ち無沙汰だったのでなんとなくCodeSandboxを開いてみたら、いつの間にかNext.jsとかNuxt.jsとかが増えてたんですねえ…。

TypeScriptセットのやつも増えてて時流を感じます。

続きを読む

Nuxt.jsでStorybookを使用してみたメモ

by

React・Vue・Angularなど使うとコンポーネント単位でUIプレビューしたくなるんですよねえ。
Storybookはそれを叶えてくれるツールで、規模や人員が大きくなればなるほど必要性が増してくると思いました。
StyleDoccoとか使ってた頃の手間や苦労を思い出すと、いやはや便利になったものです。

Nuxtで作ってるサイトにStorybook入れてみたら、ちょいちょいつまづくポイントがあったので、導入から問題解決についてStepByStepでメモりました。

続きを読む

[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )

by

See the Pen
vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel)
on CodePen.

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

続きを読む