[B! Vue] i_matsuiのブックマーク

i_matsui id:i_matsui

Vueに関するi_matsuiのブックマーク (13)

Nuxt3のプロジェクトにStorybookを導入する - Qiita
はじめに表題そのまんまですがNuxt3でStorybookを扱うまでの手順です。環境 Node 16.17.0 Nuxt3のインストールまずNuxt3 プロジェクトを作成します。
i_matsui 2023/03/31
[TypeScript] [storybook] [javascript][フロントエンド] ]

nuxt3

nuxt

nuxtjs

Vue
リンク
Storybook 7 を Vue 3 + TypeScript ではじめよう！
想定読者や使い方などについては「はじめに」の章をご覧ください。
i_matsui 2023/03/31
Vue

TypeScript

storybook

javascript

フロントエンド
リンク
Vuexでモジュール分割　〜ファイルを分けてみた〜 - Qiita
Vuexを使っていてstateが多くなってきたのでモジュール化したいと思い、せっかくなので各モジュールを1ファイル毎に分けてみました。モジュール化の設定と、コンポーネントからの利用方法をメモしておきます。全部公式ページに書いてあることですが、特に呼び出し方なんかは、毎回「どう書くんだったけ？？」と探すのが面倒だったのでまとめてみました。環境 vue: 2.6 vuex: 3.5 ファイルを分けるさっそく各モジュールを1ファイに分けていきます。今回はVuexの公式サイトの例をベースに利用したいと思います。構成ディレクトリ構成はこんな感じにします。 const getDefaultState = () => ({ message: '', count: 0, }) export default { namespaced: true, state: getDefaultState(
i_matsui 2023/03/15
vue

vuex

モジュール

module
リンク
ReactとVueの比較 | 完全に同じアプリのコードの書き方の違い - Qiita
はじめに JavaScript フロンエンドフレームワークは 2014 年ごろから本格的に使用され始め、従来のサーバーサイドテンプレートに対し、現代では一般的な Web 技術としてすっかり定着し、シェアとしては React、Vue が2強状態になっています。本稿では、最初に過去から現在の状況を俯瞰した後、React と Vue の関数コンポーネントを使用して、同じ画面と機能を持つコードの書き方を比較していきます。過去から現在の状況フロントエンド MVC の衰退10年前、フロントエンド MVC を標榜していた Angular や Ember は低迷し、以降のフレームワークはもはやMとかVとかMVなんたらなどのレイヤーを言及しなくなり、ビュー + イベント + ステートを1つの責務としてまとめた直感的で分かりやすいコンポーネント指向となりました。以下は State
i_matsui 2022/12/13
react

Vue

比較

javascript
リンク
vue.js, Apollo, graphQLで名簿アプリを作成する（CRUD機能の実装サンプル）
vue.jsとapollo、graphQLの学習用に、CRUD機能(create、read、update、delete︶を持つ名簿アプリを作りました。実装をチュートリアル形式でまとめます。バックエンドはgraphQLのAPIサーバーであるGraphCMSというヘッドレスCMSを使っています。概要 CRUD機能を持つ名簿アプリを作成します。右上のボタンから名簿の追加。各レコード右側のボタンで更新、削除が行えます。さらにvuetifyのdata-tableの機能ですが、並び替えやページングも行えます。デモサイトはこちら︵追加更新削除やってみて大丈夫です。︶ https://vue-sample-crud.firebaseapp.com/ 全コードはこちら https://github.com/kawamataryo/vue-apollo-crud バージョン情報 vue-cli
i_matsui 2022/12/09
Vue

graphgl

apollo

vue apollo
リンク
CoPilot
i_matsui 2021/10/06
Vue

Vuetify

テンプレート

ダッシュボード
リンク
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
フロントエンド 52124 view Vuetifyチュートリアル。CSSを書かないマテリアルデザイン最終更新日:2019/03/23 VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。 Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。マテリアルにまつわるオプションがデフォルトで備わっています。マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう！ Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。 Vuetifyが便利すぎる︻マテリアルデザイン3分入門︼ Vuetifyでマテリアルデザインをする流れ
i_matsui 2020/03/01
Vuetify

Vue.js

Vue

マテリアルデザイン

spa
リンク
Nuxt.js | Yuuniworks Note
API https://nuxtjs.org/api 方針を決める Nuxtのプロダクション環境での使い方は3つある。 Universal Mode(サーバあり) mode: 'universal' デプロイ方法 --- Node.js サーバにソースをクローンしyarn startする。サーバが必要。非同期データは、初回リクエスト時はサーバ側で取得する︵常に最新︶ページ遷移時など、2回目以降はクライアント側で取得する Universal Mode(サーバなし) mode: 'universal' デプロイ方法 --- nuxt generateで生成された静的ファイルを単に配布する。サーバが不要。非同期データは、初回リクエスト時は、ビルド時に取得したデータで固定される︵＝疑似的な SSR と考えればよい︶。このため、動的データに変更があったときは再ビルド・再デプ
i_matsui 2020/02/26
nuxt

Vue

Vue.js
リンク
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
前回の記事では画面遷移の仕方を紹介しました。画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。以下のように pageName=next というデータをnuxt-link から渡します。
i_matsui 2020/02/26
nuxt

query

Vue

Vue.js
リンク
Vue.js to TypeScriptの書き方一覧 - Qiita
最近ひたすら既存のVue プロジェクトのTypeScript化をやっているのでメモとしてまとめます。︵2019/09/09 追記︶ vue-class-componentはvue3のRFCから外されたようで、現在は、Composition APIがRFCとなっています。 Composition APIでのTypeScript化についてはこちらの記事をどうぞ https://qiita.com/ryo2132/it ems/f055679e9974dbc3f977 前提 .vueファイルで<script lang="ts">を使う vue-property-decoratorを使ったデコレータ方式のTypeScript化を行う data dataはそのままクラスのプロパティとして宣言します。 JavaScript <script > export default { name: 'Human'
i_matsui 2020/02/26
TypeScript

Nuxt

Vue

Vue.js

vue-property-decorator
リンク
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の3セクションに分けて説明していきます。基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。とりあえずは基本のみ理解しておけば困ることはないでしょう。また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記‥nuxt-property-decorator独自のデコレータの紹介を追加しました動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
i_matsui 2019/12/26
TypeScript

Nuxt

Vue

Vue.js

ja

javascript

フロントエンド

spa

decorator

component
リンク
Vue.jsで簡単なメモアプリを実装する
概要以前に投稿した﹁サーバーサイドJava エンジニアがVue.jsの基本を学習したときのメモ﹂に続く記事です。 Vue.jsの基本と周辺技術を学びながら簡単なメモアプリを実装してみました。実装にあたってVue.jsに加えてルーティングにvue-router、ストア︵状態管理︶にVuex、CSSフレームワークにbootstrap-vueを利用しました。ソースコードはrubytomato/exercise-vueにあります。(2018年6月6日現在、この記事と若干変わっていますがご了承ください︶環境 Windows 10 Professional Node.js 8.11.1 Vue.js 2.5.16 vue-router 3.0.1 Vuex 3.0.1 bootstrap-vue 2.0.0-rc.11 vue-moment 4.0.0 vue-cli 2.9.3 Visual
i_matsui 2019/03/01
js

vue

vuejs

vuex
リンク
ZOZO大忘年会でFirebaseを使った1,000人規模のリアルタイムアンケートを費用2円で制作した話 - Qiita
この記事はZOZOテクノロジーズ TECH BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。こんにちは！ ZOZOテクノロジーズフロントエンドエンジニアの高橋︵ニックネームはQ︶です︵@anaheim0894︶昨年12/26、毎年年末に行われる大忘年会︵ZOZOCAMP2018︶で、グループ会社も含めた1,000人規模でのリアルタイムアンケートを、FirebaseとVue.jsを使って制作しました。当日会場にて弊社の昨年の事業紹介や、﹁楽しく働く﹂というコンセプトの動画を流し、動画の合間で質問をし動画と一体となるような演出を行いました。その質問に対して全社員それぞれのスマートフォンで回答できるシステムを作ったので、その制作の裏側や、当日の様子などご紹介させていただきます。まずは当日の様子の紹介これを実現するまでの様子をご紹介いたします。 CAMP運営
i_matsui 2019/01/20
あとで読む

Firebase

vue.js

Vue
リンク
1