Reka UI + Updated CLI Reka UI + Updated CLI Build your component library Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source. Get Started GitHub

こんにちは、フロントエンドチームの亀ノ上です。 最近は画像生成AIやテキスト生成AIなど、AIによる自動生成に関する話題をよく目にします。特にここ最近は ChatGPT の勢いが凄まじく、毎日のようにニュースを見かけるような気もしています。 今回はそんな ChatGPT でも使用されている言語モデルである GPT-3 を用いて、Nuxt3 で簡単なテキスト生成アプリを作成します。 Nuxt3について Nuxt3とは Nuxt3の機能 Nuxt3インストール インデックスページの設定をする フロントエンド開発 バックエンド開発 OpenAIのAPI Keysを作成 フロントエンドとバックエンドを連携 おわりに 参考 Nuxt3について Nuxt3とは Nuxt3 とは、Vue.js アプリケーションを構築するためのフレームワークです。特徴としては、高速な開発、シンプルな設計、高機能な機能など
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Nuxt3はVue.jsベースのフレームワークで、より効率的にフロントエンド開発を行うことができます。 本フレームワークを使用する様々なメリットについて、またフロントサイドで私が良いなと感じたポイントを紹介します。 サンプルコードを交えて解説しますので、少しでもNux3を使ってみたいと思っていただければ幸いです。 (Nuxt3に関連するサービスなど、いくつか説明を省略しています。興味のある方は調べてみてください。) こんな人に読んでほしい Vue.jsの経験がある Nuxt.jsを使ってみたい もっと効率的にフロントエンド開発
2023年12月29日00:30 カテゴリプログラミングNuxt Nuxt DevTools の探索 Original: Exploring Nuxt DevTools Nuxt の主な目標は、Web 開発を直感的かつ強力にし、開発者が自信を持ってパフォーマンスに優れた運用グレードのフルスタック Web アプリケーションと Web サイトを作成できるようにすることです。 Nuxt は最近、Nuxt 開発者にとって非常に役立つ開発者ツールキットをリリースしました。 Nuxt プロジェクトをより深く理解し、問題をより迅速に解決するための特別なツールを提供します。 Nuxt 開発者のスーパーヒーローの相棒として想像してみてください。 この記事では、Nuxt Devtools を詳しく見て、その機能と利点を探っていきます。 インストール Nuxt Devtools は Nuxt バージョン 3.7
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
はじめに※ Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考:はじめに | Vue.js 導入Vue 3の導入(インストール)については公式ドキュメントを参考にしてください。 参考:インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
本記事では便宜上以下で表記しています。 Vue.js バージョン 2 -> Vue2 Vue.js バージョン 3 -> Vue3 JavaScript -> JS TypeScript -> TS また Nuxt.js については本記事の対象外となります。 はじめに Vue.js 2 は 2023 年 12 月 31 日に EOL となり、サポートが終了されます。 サポート終了後はセキュリティリリースも行われなくなる予定です。 Vue 全盛期だった 2019~2020 年辺りに作成されたアプリだとまだまだ Vue2 からアップデートできず、現状大分苦労している現場も多いように考えている。にもかかわらず、Zenn を含め記事が殆ど投稿されていないことに驚きを隠せません(React やりたい気持ちはわかる)。 本記事ではこれからアップデート作業に入る or 対応中の人たちのために、以前筆者が
はじめに前回の記事で、Options APIと比較しながらComposition APIの基本的な使用方法について説明しました。 Composition API を初めて知る方は、この記事を事前に読んでいただけていると幸いです。 この記事では、reactiveやrefなどのリアクティビティAPIについて深掘りしていきます。 reactivereactiveの実体reactiveはオブジェクトのリアクティブなコピーを返します。 正確には、対象のオブジェクトをTargetに設定したProxyを返します。 オブジェクトとしての使用感は変わりませんが、ProxyのHandlerによってリアクティブが実現されているようです。 以下の例を見てください。 Proxyについてはこちらを参照してください。 <script setup> import { reactive } from 'vue'; cons
If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI. In this article, I'll walk you through the steps you need to take t
<template> <div class="contact-info"> <input-contact-name v-model="model.name" /> <input-phone-numbers v-model="model.phoneNumbers" /> <input-mail-addresses v-model="model.mailAddresses" /> </div> </template> <script> export default { data () { return { model: { name: { family: 'Hoge', first: 'Taro' }, phoneNumbers: [ ... ], mailAddresses: [ ... ], } } } } </script> 子コンポーネント側は、親から受け取ったオブジェクトを、inpu
はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね?)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ
Anthony Gore | August 28th, 2017 (Updated January 20th, 2020) | 8 min read If you ask two Vue.js developers "what's the best way to implement AJAX in a Vue app?", you'll get three different opinions. Vue is a UI library and therefore doesn't provide an official way of implementing AJAX. There are a number of different approaches that may be used effectively, each with its pros and cons that should
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く