がんばらない Vue.js / Vuejs on VS Code & TypeScript
de:code 2019 で発表したスライドです。 Web フロントエンドの開発で近年人気が高まっている Vue.js ですが、移り変わりの激しいフロントエンド技術を追いかけることが目的になってしまい、開発自体の効率がなかなか上がらないという声もよく聞きます。 このセッションでは、Visual Studio Code + TypeScript 利用してクールに Vue.js を開発できる手法や Tips を紹介します。
de:code 2019 で発表したスライドです。 Web フロントエンドの開発で近年人気が高まっている Vue.js ですが、移り変わりの激しいフロントエンド技術を追いかけることが目的になってしまい、開発自体の効率がなかなか上がらないという声もよく聞きます。 このセッションでは、Visual Studio Code + TypeScript 利用してクールに Vue.js を開発できる手法や Tips を紹介します。
With the release of the VueJS 3 "Request for Comment" documentation about two weeks ago, Evan You introduced the VueJS function-based API and has set the VueJS community ablaze. These new ideas are still in the "Request for Comments" stage, so they're far from set in stone, but because the RFC introduces such significant changes, I made a quick summary of what you need to know. NB: All this inform
Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework. The 3.0 release represents over 2 years of development efforts, featuring 30+ R
GitHub - vuejs-jp/hol-vue-ts-basic: Vue.js 初心者向けハンズオン - Visual Studio Code, TypeScript, Element 編
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
GitHub - vuejs/core: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」 - Qiita
「jQueryでやっていたことを、サーバーサイド側を何も変えずにフロントエンド側をVuejsにしておくれよ」 どうしてもレンダリングはサーバーサイドがやっているものを変えたくない。でもフロントは変えろ。そんな要望ありますよね？ え？ありませんって？あったんですよ。 コンテンツの中身は可変なのでSSレンダリングしたいけど、APIを作ってFE側から取ってくるほどの内容でもない。その上で、レンダリングするHTMLにはVueのためのバインディングや条件式が書けない。そんな場合を想定します。 例えばアコーディオン 閉 開 こんなイメージのものを作って行こうと思います。 まずはサーバーサイドにレンダリングしてもらうHTMLです。 コード html <div id="accordion--wrapper"> <div id="accordion--component" class="accordion"
Proposal for dropping ie11 support in Vue 3 · vuejs/rfcs · Discussion #296
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
GitHub - vuejs/petite-vue: 6kb subset of Vue optimized for progressive enhancement
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
[Abandoned] Class API proposal by yyx990803 · Pull Request #17 · vuejs/rfcs
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
![[Abandoned] Class API proposal by yyx990803 · Pull Request #17 · vuejs/rfcs](https://cdn-ak-scissors.b.st-hatena.com/image/square/00e6925bdb355e00c28a61f841c6ec7a84b107c0/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fcf483198350b96ff20e15f06092509acd28729ad2e3cd5c862520f066596de06%2Fvuejs%2Frfcs%2Fpull%2F17)
Vue 3: Mid 2020 Status Update Many of our users have been asking this question: when will Vue 3 be ready? We have refrained from giving a definitive answer because predicting software delivery time is hardly ever accurate. As a non-profit-driven project, we wanted to focus on writing good software instead of hitting deadlines. However, it's been a long wait, and we know the uncertainty can make it
Yusuke Iinuma Working at GMO Pepabo, Inc.A staff of Vue.js Japan User Group おしながき発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテストをする指針まとめ発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテストをする指針まとめ発表の対象者 テスティングフレームワークなどのツールの使い方はわかるが、 実際の開発でどのように使えばいいのか悩んでる人 🎊 現場に合ったテストについて考えるきっかけになれば 🎊話すこと テストはなぜ必要なのかテストするときの指針の紹介現場で行ってるテストの事例話さないこと コードレベルでのテスト実装方法発表のゴール現場のVue.jsアプリなぜテストを書くのかテストを書く理由と対応投資対効果のいいテ
chrome拡張機能の作り方 この記事では、一人でchrome拡張機能を開発して、ストアに上げるためのデータを作るまでをご紹介します。 また、有料のサンプルコードをBaseにて提供しています。 （googleで検索したページのタイトルをジョジョの名言に置き換える拡張機能です。） （購入はこちらから） utamaro.base.shop サンプル画像（左の検索結果が、右の画像のようになるサンプルです） ※ html, css, javascript, npmで依存関係の管理ができることを前提条件としています。 まずは、拡張機能を作るにあたっての要件を決めます。 要件 規模が大きくなっても、効率的に開発できること console.logデバッグをビルド段階で削除すること（ビルド後のソースに含まれない） html内のdomを作成する際はテンプレートとして用意したものを使う scssで開発する f
Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.
Tail-kit Components and templates for Tailwind CSS 3.0Tail-kit now support tailwind CSS v3 !Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0. It's all compatible with React, VueJS and Angular application.
created と mountedどちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスできるDOMにはアクセスできないmounted created + DOMにアクセスできるAPIアクセスは created と mounted のどちらで行う？APIアクセスはほとんどのライブラリで非同期に行われる。そのため、 created と mounted のどちらでAPIアクセスを開始しようが、レスポンスが返ってきた時点でコールバックが実行される。 上記を踏まえて、レスポンス完了後のコールバックの中で、 propsにデータを設定するだけの場合は、 created を使う DOMを構築してる間にも、HT
VueJS with typescriptでしばしば遭遇するProperty 'XXX' does not exist on type 'CombinedVueInstanceの解消法 - Qiita
みたいなエラーに遭遇します。 これはわりと有名な問題で検索すると色々な情報がひっかかるんですが、「結局どうすればええんや？」というところがわかりにくかったので整理してみます。 調査自体は趣味の範疇ですが、調査に使ったコードは仕事のものなのでコードサンプルはありません。ごめんよ。 何が起こっているのか？ VueJSで画面(またはコンポーネント)を作る場合、独自にprops, state, methodなどを定義していくわけですが、その際に型推論が効かなくなって「そんなメソッド(プロパティ)知らんがな」と、言われているのがこのエラーです。 同じようにコードを書いていても型推論が効いたり聞かなかったりするのでやっかいです。 ちなみにこのエラーが出ても実行自体には問題ありません。 安直な解決方法 手っ取り早く解決するなら型を無視するのが楽です。
Compatibility with Prototype.js has been broken since 3.2.46 · Issue #9528 · vuejs/core
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
GitHub - vuejs/composition-api: Composition API plugin for Vue 2
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Authentication in SPA (ReactJS and VueJS) the right way
Photo by moren hsu on UnsplashCookie, session, token, JWT, attacks, where to store token, security concerns? Everything you need to know is here. The updated version (September 2019) is available here. TL;DR;Authentication in a single page application (SPA) involves several patterns with pros and cons. This article will list the main important concepts to know and have in mind when dealing with us
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component
-for-vuejs-and-typescrpit
https://fukuokats.connpass.com/event/131632/
Vue.js * How to make front-end / vuejs how to make front-end
src: https://github.com/nrslib/vue-sample-assortment # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
トレンドのVuejs/NuxtをAws ECS, FargateでSSR、詳細解説します🚀 | Ragate ブログ
こんにちは！ ウェブアプリケーションの開発でデファクトスタンダードな VueJS / NuxtJS ですが、SSR 時のデプロイ方法についてはみなさん悩まれることが多いのではないでしょうか？ SPA であれば AWS Cloud Front と S3 のコンビで十分に運用可能ですが、要件に SSR が入ってくると Nodejs のランタイムが必要になりますね。 そんな時に大活躍するのが ECS, Fargate です！ 想定する読者 AWS サーバーレス環境で NuxtJS で SSR したいヒトNuxtJS のデプロイ方法について悩んでいるヒト はじめに Lambda での SSR 時の問題 実は、Lambda と API Gateway のコンビの方がもっと手軽にSSRを構築可能です。しかし、Lambda にはレスポンスボディサイズの制約、デプロイ可能な ZIP サイズの制約などがあり
GitHub - vuejs/pinia: 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
Intuitive, type safe and flexible Store for Vue 💡 Intuitive 🔑 Type Safe ⚙️ Devtools support 🔌 Extensible 🏗 Modular by design 📦 Extremely light ⛰️ Nuxt Module Pinia works with both Vue 2 and Vue 3. Pinia is the most similar English pronunciation of the word pineapple in Spanish: piña. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar
Vue 3 is now in RC! We are very excited to announce that Vue 3.0 has entered RC (Release Candidate) stage! Entering the RC stage means that both the API and implementation of Vue 3 core have stabilized. In principle, we do not expect to introduce new major features or breaking changes before the final release. Most official framework parts also now have v3 support. Please check here for the latest
週刊Railsウォッチ（20190521-2/2後編）サーバーレスクラウドのベンチマーク比較サイト、VueJSパフォーマンス向上、GraalVM 19.0ほか｜TechRacho by BPS株式会社
2019.05.21 週刊Railsウォッチ（20190521-2/2後編）サーバーレスクラウドのベンチマーク比較サイト、VueJSパフォーマンス向上、GraalVM 19.0ほか こんにちは、hachi8833です。5月とは思えない風雨がやっと収まりましたね。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓お知らせ: 第11回公開つっつき会（無料） 応募先: 週刊Railsウォッチ公開つっつき会 第11回｜IT勉強会ならTECH PLAY［テックプレイ］ 第11回目を迎えた公開つっつき会は6月6日（木）19:30〜にBPS会議スペースにて開催されます
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 今回のサンプルはBootstrapベースのページネーションを実装します。 ライブラリの呼び出し まずライブラリを呼び出す為に、以下の２通りの呼び出しを選択します。 コンパイラを使用しない場合は、UMDを使ってください。 ES6等で実装する場合 import Paginate from 'vuejs-paginate' Vue.component('paginate', Paginate) UMDで実装する場合 Vue.component('paginate', VuejsPaginate) ページネーションメソッドを設定 サンプル用にforを使って、リスト用の配列itemsを設定します。 dateのperPageに1ページに表示するアイテム数を設定します。 またitemsにリストを設定
Release v4.0.0 · vuejs/vuex
This is the official Vuex 4 release. The focus for Vuex 4 is compatibility. Vuex 4 supports Vue 3, and it provides the exact same API as Vuex 3, so users can reuse their existing Vuex code with Vue 3. There are a few breaking changes described in a later section, so please check them out. You can find basic usage with both Option and Composition API in the example directory. It's still released un
VueVueJS で Storybook を使うモジュラーと再利用可能なコンポーネントを作るために Vue と Storybook でコンポーネント ライブラリを構築する方法を学びましょう。 Storybook はインタラクティブに開発し、ユーザー インターフェイス コンポーネントをアプリケーションを実行しないでテストできます。Storybook は独自の Webpack 構成でコンポーネント ライブラリとしての役目を果たすので、プロジェクト依存関係や要件を気にせずに個別に開発できます。 本投稿では、チームメートの Steve Hobbs 氏が作成した人気のカンバンボード プログレッシブ Web アプリケーション（PWA）（GitHub で入手可能）を使って、Storybook を既存の Vue.js プロジェクトに統合する方法を学んでいきます。このプロセスは新しい Vue プロジェクトに
This commit was signed with the committer’s verified signature. We're happy to announce the release of Vue CLI version 4! This major version bump is focused on necessary version bumps of underlying tools, better default setups, and other fine-tunings required for long-term maintenance. We expect a smooth migration experience for most users. You can view the full migration guide at https://cli.vuej
Help us understand the problem. What are the problem?
Credit Card Form - VueJs
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
TL;DR 自分が実装したカスタム(子)コンポーネントにv-modelを書き、データの双方向データバイディングができる。 基本的にはデフォルトでは、そのカスタム(子)コンポーネントで、value のキーのpropsでデータを受け取り、inputのイベント名で変更したいデータをemitすれば、親のほうでv-modelで渡しているデータが更新される。 そのカスタム(子)コンポーネントで、propsで受け取るデータのキーだったり、イベント名を変更したい場合は、model プロパティに、変更したいデータのプロパティと変更したいときの使うカスタムイベント名を定義する。 はじめに メディア運営会社のエンジニアとして働いています。メディアのコンテンツを入稿するツール(以下: ダッシュボード)をVuejs(Nuxtjs)で開発しているとき、自分が実装した子コンポーネントを呼び出した親で使うときに、双方向デ
![[Vuejs]カスタムコンポーネントでv-modelを使えるのを知って幸せになれた話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b668325911b18bc687df1ebd0e3faff1f9a61a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCVnVlanMlNUQlRTMlODIlQUIlRTMlODIlQjklRTMlODIlQkYlRTMlODMlQTAlRTMlODIlQjMlRTMlODMlQjMlRTMlODMlOUQlRTMlODMlQkMlRTMlODMlOEQlRTMlODMlQjMlRTMlODMlODglRTMlODElQTd2LW1vZGVsJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg4JUUzJTgyJThCJUUzJTgxJUFFJUUzJTgyJTkyJUU3JTlGJUE1JUUzJTgxJUEzJUUzJTgxJUE2JUU1JUI5JUI4JUUzJTgxJTlCJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThDJUUzJTgxJTlGJUU4JUE5JUIxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04ZGQ5YjI3ZTM3ZDhmMzVhMmY5ZjBmZDk2MzY2Y2RkMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdW1lLWt1bjEwMTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTVlZjllMzJjN2UyODFiMTNlNzhjZjRhNzkyMGY0Mjdh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcd9ac7ad053ad92ea227fbe751962b82)
Main reason of this story is to help my colleagues and myself to remember some best practices for writing clean and… 1. Component OptionsBest way to create vue component with typescript support is using vue-property-decorator. It creates class like syntax that makes easy to understand and group different parts of component options Props : @Component export default class TestComponent extends Vue {
created と mountedどちらもVuejsが提供するライフサイクルフック。たいていのサンプルでは、このライフサイクルフックのどちらかでAPIアクセスをするが、どんな違いがあるんだろう。 created インスタンスの初期化が済んで props や computed にアクセスできるDOMにはアクセスできないmounted created + DOMにアクセスできるAPIアクセスは created と mounted のどちらで行う？APIアクセスはほとんどのライブラリで非同期に行われる。そのため、 created と mounted のどちらでAPIアクセスを開始しようが、レスポンスが返ってきた時点でコールバックが実行される。 上記を踏まえて、レスポンス完了後のコールバックの中で、 propsにデータを設定するだけの場合は、 created を使う DOMを構築してる間にも、HT
A Jira clone built with Vuejs & Nodejs/Graphql - node/GraphQLで作られたJiraクローン MOONGIFT
意外と（？）Jiraのクローンは多いです。Webベースのプロジェクト管理として一定の地位を築きつつあり、多くの企業で使われています。10人まで無料ですが、その後は有料のサブスクリプションサービスになります。 そんなJiraクローンとして名前の通り、A Jira clone built with Vuejs & Nodejs/Graphqlを紹介します。どんな技術を組み合わせているかも丸わかりですね。 A Jira clone built with Vuejs & Nodejs/Graphqlの使い方 トップページです。押せないボタンも多いですが、デザインの再現度は高いのではないでしょうか。 プロジェクト詳細です。 検索機能です。 課題の詳細はモーダルウィンドウで確認します。 課題の作成画面です。 カンバンの項目はドラッグ&ドロップで移動できます。 A Jira clone built wi
Vuesax - Framework for Vuejs
Vuesax Framework Components for Vuejs We love what we do. Let us help you do what You love.
mouseの慣性操作、TrackPadのピンチ操作、TouchScreenの慣性操作、ピンチ操作をどうやら自分で実装しないといけなさそうです ※これ本当ですかね？もし良い情報あったらお教えください #慣性操作の実装(Mouse/TouchScreen) MouseとTouchScreenの慣性動作について実装します。 どこかにライブラリがありそうだけど見つけられず、自分で実装しています。 実装の思想としては、慣性が初速から動摩擦係数で減っていくとすると、 有名なニュートンさんのF=maを一回積分してv(t) = v(0) - at： aは摩擦係数とすると計算できるという単純な中学物理のロジックです。 x, y座標のそれぞれの時間あたりの減衰Speedを計算しています。 async onGraphUp (e) { // 初期速度の計算 this.touchSpeedX = Math.sqrt
Javascriptはあまり詳しくないAndroidエンジニアが、Nuxt.jsとVuetifyでWebページを作成している。 やりたいこと HTMLで表示した内容をクリップボードにコピーしたい （dataやpropsで渡した値ではない） できたコード これでいけた div内の全pタグのテキストがクリップボードにコピーできた。 <template> <v-layout> <v-btn icon fab color="orange" @click="witeToClipboard()" > <v-icon>file_copy</v-icon> </v-btn> <div id="target"> <p>コピーしたい文章1</p> <p>コピーしたい文章2</p> <p>コピーしたい文章3</p> </div> </v-layout> </template> <script> export d
eslint-plugin-vuejs-accessibilityとは何か eslint-plugin-vuejs-accessibilityは、Vue.jsのコンポーネントにおけるアクセシビリティの問題点を検出するためのESLintプラグインです。 類似するものとしてeslint-plugin-jsx-a11yがあります。これはReactのJSXにおけるアクセシビリティの問題を検出するためのESLintプラグインです。今あるルールはこのプラグインから参考になっている部分がいくつかあります。 eslint-plugin-vue-a11yとの違い 元々は個人で開発していたeslint-plugin-vue-a11yというものがあります。 こちらのeslint-plugin-vue-a11yは現在メンテナンスがされておりません。今回紹介するeslint-plugin-vuejs-accessi
GitHub - vuejs/vitepress: Vite & Vue powered static site generator.
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueJS is dead, long live VueJS!
Release v3.0.0 One Piece · vuejs/core
Vue 3: mid 2020 status update · Issue #183 · vuejs/rfcs
20190725-vuejs-application-testing-with-why
vuejsもreactjsも使わないchrome拡張機能の作り方 - utamaro’s blog
Vuejs APIアクセスはcreatedとmountedのどちらで行う？
Vue 3 is now in RC! · Issue #189 · vuejs/rfcs
Release v1.0.0 · vuejs/composition-api
「vuejs-paginate」でページネーション を実装する
VueJS で Storybook を使う
Release v4.0.0 · vuejs/vue-cli
【Vue.js】Vuejsをchromeブラウザでデバッグする方法 - Qiita
[Vuejs]カスタムコンポーネントでv-modelを使えるのを知って幸せになれた話 - Qiita
Vuejs Typescript Best Practices 2
Vuejs APIアクセスはcreatedとmountedのどちらで行う？
VueJSでのTouchイベント処理をむりやり実現する - Qiita
Vuejsで子コンポーネントの表示内容をクリップボードにコピー - Qiita
eslint-plugin-vuejs-accessibility入門