Vue/HTML/Markdownなどに埋め込まれたJS/TS部分が、どうフォーマットされるのか調べたかった。 Here be dragons…, yet another dragons… 🐉 js-in-xxxになれるparser まず、どこで観測できるか。 Markdown系 markdown: コードブロック内 mdx: コードブロック内、import/export部 HTML系 html: <script>タグ内、onclick等のイベントハンドラ属性 vue: <script>タグ内、テンプレート内の各種ディレクティブ・式 angular: テンプレート内の各種バインディング・ディレクティブ HTML系のparserは、他にもmjmlとかlwcとかもあるけど、そこでは処理されない。 埋め込み処理の流れ 親ファイル側の処理の一環として、埋め込み部を処理するパートがある その際、t
Summary: Storybook 8 integrates Vue’s official language tools to improve how Storybook generates controls and documentation in Vue Vite projects. Get started by upgrade your Vue Storybook docgen configuration today! Thanks to the great work of our Vue maintainers (Chakir, Lars, and Kasper), Storybook 8 significantly improves how we generate controls and documentation in Vue projects. We're using a
エントランスで集合写真を撮るBASE株式会社メンバーの様子 こんにちは。 最近めっきり寒くなってきて布団が恋しい季節になってきましたね。 皆さんはいかがお過ごしでしょうか。 さて、この度BASE株式会社は2023/10/28(土)に開催された Vue Fes Japan 2023 にシルバースポンサーとして協賛させていただきました。 今回は参加レポートとして会場の様子やセッションの感想についてお届けします。 Vue Fes Japan 2023とは Vue Fes Japan は 2018 年に誕生した日本最大級の Vue.js カンファレンスです。 今年は4年ぶりとなるオフライン開催となり、当日のセッションは立ち見が出るほど盛り上がっていました。 今年はゲストスピーカーとしてVue.js/Viteの作者であるEvan You氏やVueエコシステムのコアメンバーの方が来日し、キーノートやセ
What is Vapor Mode? 🧐 Vapor Mode is a new and alternative compilation strategy inspired by Solid.js. It aims to enhance your apps' performance by compiling your code into a more efficient JavaScript output. When used at the app level, you can drop the Virtual DOM completely, thus reducing your app's bundle size. ✅ Benefits More performant Uses less memory Requires less runtime support code. Solid
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip all the time in my own work. A repo that includes everything covered in this post
When Vue 2.0 and TypeScript 2.0 were released in 2016, people wanted to use them together. The sad thing was they couldn’t. You could make Vue and TS code compile together, but not without a lot of hassle. It’s neither elegant (what Vue is all about) nor type-safe (what TypeScript is all about). With Vue 2.5 shipping typing definition and Vue CLI 3’s improvements, it has become easier to setup a p
10/28に、Vue の著者ユーさんは Vue Ref の糖衣構文に関する RFC を提案した。 refの定義をJavaScriptラベル構文を使うことでさらに簡略化できます。この構文はSvelteとまったく瓜二つなので、ここで私の考えを書く。 まず、コードを見ていきましょう。 <script setup> // ラベル構文 ref: count = 1 function inc() { // .valueせずこのままcountを使える count++ } console.log($count.value) </script> <template> <button @click="inc">{{ count }}</button> </template> このコードを理解するには、まず Vue Composion APIをどんな役割をしているのかを理解しなければならない。 Vue Comp
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
ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 Vue.js で、input タグの ::placeholder 疑似要素に動的なスタイルを当てたい場面がありました。 この記事では、その際の問題と解決方法について紹介します。 この記事のゴール Vue.js では HTML クラスのバインディング や インラインスタイルのバインディング を用いて、動的にクラスやインラインスタイルを割り当てることで CSS を動的に変更ができます。 例えば、<input :style="{ paddingLeft: myPadding }">で、input タグの padding-left は myPadding を更新することで動的に変更されます。 しかし、これらの構文では ::placeholder の疑似要素だけを指定できず、結果スタイルを変更できません。 CSS カス
2019年4月28日TypeScript,Vetur,VueVue の TypeScript 対応は v2.0 から公式に型定義がサポートされるようになったり、v2.5 で Vue.extend を使ったときに this の型が推論されるようになったりと、改善が何度も行われています。 しかし、課題はまだたくさんあり、その中でもよく聞くのが、テンプレート内の式の型チェックがされないという課題でした。TypeScript はテンプレートを解釈できないので当たり前ですが、もしそれが解決できたらより安全になるでしょうし、開発体験も向上すると思います。 そしてこの課題は Vetur の最新版で解決されました。 Vetur v0.19.0 #Vetur は Visual Studio Code の拡張機能の一つで、Vue の単一ファイルコンポーネント (.vue ファイル) のための様々な機能を提供し
こんにちは。Monaca/Cordova担当の内藤です。 今年(2018年)の11月3日に、秋葉原 UDXでVue Fes Japan 2018が開催されました。Vue.jsの開発者であるEvanさんをはじめ、Vue CLI UIクリエーターのGuillaumeさん、Microsoft シニアデベロッパーアドボケイトのSarahさん、Vue Test UtilsメインクリエーターのEddさんらをお招きしています。 開発者であるEvanさんの基調講演では、新しくリリースが予定されているVue 3.0の概要について、お話いただきました。Vue 3.0の特徴として、以下の点を解説していただきました。 より速く より小さく よりメンテナンスしやすく よりネイティブ向けに作りやすく よりあなたのコードの保守性を向上 どれも魅力的な改善点ですが、このブログ記事では特に、コンポーネントやレンダリングのロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
