vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo
Vue.jsのハイブリッドフレームワークとして人気のNuxtですが、メジャーアップデートとなるNuxt3がそろそろGAになりそうです。 Vue3やNitro、Vite等、多くの変更があるNuxt3ですが2022年春にRC版が公開された後、ハイペースで更新が続きかなり安定してきた印象です。 ここでは、Nuxt3入門と題してNuxt3が提供する基本機能について連載を書いていきたいと思います。 まず、初回はNuxtが提供するレンダリングモードを整理します。 なお、基本的なプロジェクト作成の方法は公式ドキュメントに記載されているとおりですので触れません。 今回は、新しいVueコンポーネントを作成せずに初期状態のNuxtのWelcomeページで見ていきます。
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
TypeScript開発において、関数の返り値などに型がついていると、開発体験が向上するかと思います。しかしfetch関数を用いて外部API等を叩いた際、fetch関数の返り値には型が適用されません。API fetchの返り値に型を適用させるために、OpenAPI形式のAPI定義ファイルを元に、型定義フ…
Nuxt 3.5.0 is out, bringing Vue 3.3, new defaults, interactive server components, typed pages, environment config - and much more. ⚡️ Vue 3.3 releasedVue 3.3 has been released, with lots of exciting features, particularly around type support. new defineOptions macro'generic' componentstyped slots and using external types in defineProps... and moreThis also brings a significant improvement to data
現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。 パフォーマンスの向上 Nitro engine Composition API Vite Vue 3 Webpack 5 Nuxt CLI TypeScript のネイティブサポート ESM サポート Nuxt devtool(まだ) and more... 上記以外にも新たに追加された機能はどれも興味深いものばかりで今すぐにも使いたいものが揃っています。Nuxt3 で追加された新機能を体験してみましょう！ インストール Nuxt3 からは create-nuxt-app の代わりに新しく Nuxt CLI を使用してプロジェクトを作成します。
初めに この記事はyamanokuさんの投稿されたzennのscrapの内容について自分がまとめたものです。（yamanokuさんの許可はいただいています、ありがとうございます！） compassで1月13日に開催されるFEStudyでyamanokuさんが登壇されるのでもしよければ参加してみてください。 Zennに分割したのを投稿していますが、個人的にまとめてどこかにおいておきたかったためにこのような形で投稿しています。 間違った情報がないように注意はしていますが、もし間違っている箇所、不十分な箇所がありましたらコメントなどでいただけると幸いです。 それぞれの用語などの情報についてリンクを貼っているのでそこまで読めば深くまで理解できると思います。 かなり長いですが、頑張って書いたのでぜひ読んでください。 HTML HTML Standardを参照できる 入れ子関係 どういった用途で使われ
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみたJavaScriptGoogleAppsScriptVue.jsclaspNuxt Google Apps Script（GAS）で Nuxt 動かしてみたら面白いのでは？ と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました！ Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec そして Google サイトで上記 URL を埋め込んで完成です。（GAS の 分かりづらい URL を隠
React を使ってプロトタイプを実装したりすることはあるけど，今まで Next.js を試したことがなかった．そろそろ入門しなければ！という危機感もあり，Next.js Learn (Basic) を一通り試してみた．入門する前と比較すると「Next.js でできること（基礎の基礎）」を把握することができ，非常に良質なコンテンツに仕上がっていた．今回は Next.js Learn (Basic) から学んだことを整理する．Next.js に入門するならまず試してみると良いと思う． nextjs.org なお，今回は Next.js 9.2.1 を使えるようにローカル環境を構築した． $ npm view next version 9.2.1 Next.js Learn (Basic) Basic では「計9種類」のコンテンツが用意されている．Next.js を使ったサイト内遷移（ルーティ
NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. Deploy your Nuxt apps at low cost and with ease, ensuring lightning-fast performance for your users anywhere on the planet. Ship faster with our built-in full-stack features: AI, Database, Files Storage, KV, Caching and more.
noteのフロントエンドリアーキテクチャとは以前「フロントエンドapp分割」として紹介していたプロジェクトの延長にあるものです。 そもそもフロントエンドリアーキテクチャとはなにかnoteは現在APIをRuby on Railsで、Webフロントエンドは主にNuxtで実装されています。Nuxtフレームワークの設計上VueとVuexを多用していくわけですが、多くの機能が密結合しWeb Vitalsの悪化や、生産性の低下、スケールしにくい状態、障害を引き起こす原因になるなどの影響が発生しています。 そこで機能毎に適切な粒度でアプリケーションを分割しつつ上記の問題を解決してくプロジェクトが始まりました。それがフロントエンドリアーキテクチャです。 ちなみに分割するアプリケーションで使うフレームワークはNextを採用しています。これはNuxt v3への移行が困難を極めるため、新たな設計のもとでReac
株式会社スタメンでフロントエンドエンジニアをしている神尾です。普段は、エンゲージメントプラットフォーム「TUNAG」の開発をしています。 TUNAGでは、2023年1月からWebフロントエンドのリプレイスプロジェクトが始まり、今もプロジェクトが進行中です。現在のWebフロントエンドでは技術選定の選択肢が多く、選定にあたっての検討事項がとても多いと思います。 この記事では、リプレイスの際に採用した技術の選定理由や設計についてまとめたので、この記事を通して、読んでくださった方のお役に立てれば嬉しいです。 また、リプレイスの背景やインフラについては別記事になっているので、そちらもご覧ください。 tech.stmn.co.jp 技術構成 / 選定理由 React / Next.js / TypeScript React Next.js TypeScript SWR aspida msw story
BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ npm install --save @kyvg/vue3-notification プラグインの作成 vueプラグインを使うので、~/pluginsディレクトリに、 ファイル(vue-notification.client.ts)を追加する。 client側のみで利用するので、.clientサフィックスで作成 // ~/plugins/vue-notification.client.ts import Notifications, { notify } from "@kyvg/vue3-notificati
Vuexの根幹 【ストア】 【役割】 Vuexを使う上でアプリケーションの状態（情報）を保持する役割です。 Vuexのコンセプトである『Vuexは信頼できる唯一の情報源である事』が前提にあるため、ストアはアプリケーションの中でただ一つだけの根幹となる存在です。 今回はその大事な役割であるストアの４つの概念をまとめます。 ４つの概念 ・state→アプリケーションの状態（情報） ・getter→stateの一部やstateから返された値を保持する ・mutation→stateを更新（変化）させる ・action→非同期通信や外部APIとのやりとりを行う この４つを一纏めにしたものをモジュールと言います。 モジュールでこの４つを守っているイメージです。 ストアの作成 Vue-cliでVuexを取り込んでおけば、srcフォルダにstore.jsが入っています。 Vuexも読み込まれていますので
Edit your Nuxt Website With your team, in productionNuxt Studio gives you a git-based editing experience with live preview for your Nuxt Content website. Opening a new way to collaborate between developers and marketing teams.
こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。 全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです） ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。 こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。 よって
この記事は食べログ Advent Calendar 2019 3日目の記事です。 はじめまして。食べログのフロントエンドチームに所属している@empitsu88です。 食べログの各種サービスのフロントエンド領域の設計・開発を担当しています。 先日、「食べログ テイクアウト」という新しいサービスをリリースしました。 こちらはiOSアプリですが、管理画面側をNuxt.js + TypeScriptで開発しています。 Nuxt.js + TypeScriptをプロダクトコードに使用するのは初めての試みだったので、メンテナブルなアプリケーションにするにはどうしたらいいか、日々模索しています。 今回はその技術を選定するに至った経緯や、チームで運用しているコーディングガイドラインの一部をご紹介します。 技術スタック Nuxt.js TypeScript Class API Sass + scoped
こんにちは ebi です。 前回の記事で NuxtJS と WordPress を組み合わせるようなサイト構成の検証を軽くやったんですが、あまり真面目なコーディングをやらず仕舞いでした。 WP REST API × NuxtJS で SSG するサイト作り 今回は NuxtJS 環境をベースでやる LP や Web サイトのコーディングに少しチャレンジしてみたいと思います。 Next.js も触りたかったんだけど、前回があまりにしょぼい内容しかやってなかったので次回以降にお預けと言うことで今回も NuxtJS です。 検証用のコーディング題材 って皆さん滅茶苦茶困りませんか？ デザインスキルとかまるでないし、かと言って既存サイトをそのまま真似するのもあれだし、と無駄なプライドを持って作業を進めたところでまともなコーディングにならなくて、CSS フレームワークの適当なパーツを組み合わせたとこ
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
ふと OpenAI の GPT-3 による自然言語処理を体験してみたくなり、アカウントを作成したのが今日の13:30 その2時間後には OpenAI のサンプルアプリを Next.js から Nuxt 3 + TypeScript に書き換えてました。 思いつきで OpenAI を試してみたくなり、チュートリアルを読んだら触ってみたくなり、Next.js のソースコードを見たら Nuxt 3 にしたくなりました。 それでもしばらく Open AI を試していたのですが、なぜか気づいたら Nuxt 3 化し始め、あっさりできたのでしばらく疎かにしてた Zenn の記事を書こうと思い立ったのが今（16:00） なぜ Nuxt 3 で作りたくなったのか Nuxt 3 になって <script setup> は使えるし useFetch() で簡潔にAPIを扱えるし、APIルーティングも使えるし、
Nuxt.jsを使うと、比較的簡単にPWA対応のサイトを作ることができます。 ただ、PWA対応と一言で言っても、PWAが指す機能は様々なものがあります。 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 カメラ 決済機能 etc iOSではAndroidと比べてPWAの対応が遅く、キャッシュ以外はあまり使うことがなかったのですが、 最近iPhoneからPixel4に機種変更したこともあり、手元の環境で色々とPWAを試すことができるようになったので、 色々実装して遊んでみました。 今回は、比較的簡単に実装ができる、 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 をNuxt.jsとPush7というサービスを使って、実装してみたいと思います。 なお、今回作成したサンプルは以下のURLにアップしています。 https://nuxtpwa.netlify.com/ https:/
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作るGoGraphQLapolloNuxtgqlgen お題 簡易ToDoアプリ（と言っても、この記事上では単に「ToDoの新規登録」と「登録済みの全ToDoの表示」しか出来ない）を題材として、表題の組み合わせでGraphQL通信ロジックを書くとどんな感じになるかを確認してみる。 ※今回はRDBを使った永続化などはしないで、バックエンドからは固定値を返す。 前提 Nuxt.jsやGoについては、個人ないし会社での開発経験があり、フロント->サーバの接続は（例えば）Axiosなど使ってRESTでやってたけど、GraphQLに変えてみたいという人が対象。 ただ、「そもそもGraphQLとは？」とか「RESTと比べたメリット・デメリットは？」みたいなことは書かない。（既に
Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。 画像の格納場所 Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。 それぞれの格納場所によって指定方法が異なります。 「assets」からの指定方法 assets配下のファイルを使用する場合は「~/assets」を指定します。 「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。 「~」の代わりに「@」（アットマーク）でも表示されました。 公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。 アセット Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし
はじめに アプリを作ったのはいいものの、フィードバックをくれる人がいなかったのでQiitaで紹介記事を書くことにしました。 独学で周りにアドバイスをもらえる人がいないので、改善点などどんどん指摘してくださると幸いです。 自己紹介 作者は今年の2月末ごろから独学でプログラミングを学習しています。 高校時代にほんの少しHTMLを触ったことがある程度で、事前知識はほぼありませんでした。 現在はアプリを作成しながら、10月の基本情報に向けて勉強しています。 アプリ制作は今回で2作目になります。 前作URL 前作リポジトリ アプリ概要 これが作成したアプリです。 サイトURL githubリポジトリ PolPa(ポルパ)は、学習時間に応じてレベルが上がる学習記録アプリです。 全体像がわかると思うので先にERを貼っておきます。 機能紹介 主な機能を一部紹介します。 ゲストログイン 新規登録フォームの下
Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月（2024年7月）ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン
個人的にNuxtのソースファイルはsrcディレクトリに入れるのが好きなので、 assets, components, layouts, middleware, pages, plugins, static, store のディレクトリは src に移動。 nuxt.config に srcDir: 'src' を追加。 nuxt.config.js を nuxt.config.ts に変更。 import { Configuration } from '@nuxt/types' const config: Configuration = { // Config設定の記述 // ... buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module', '@nuxt/
目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認とか楽ちん。 <html> <body> <svg viewbox="0 0 1200 630" width="1200" height="630" style="background-color: lightgray;"> <rect x="550" y="265" width="100" height="100" fill="blue" /> <circle cx="550" cy="265" r="30" fill="none" stroke="red" stroke-width="5" /> </svg> </body>
Singlelink is the host of choice for web3 projects, independent creators, and others because of its freedoms from being open-source.
Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな
【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別)Vue.jsNuxt はじめに Nuxtのライフサイクル記事はたくさんありますが、コンポーネント別にまとめてくれている記事がなかったため、自分用に作成しました。よく使うんですが、よく忘れるんですよね、、、。 前提 バージョン Nuxt.js 2.14.4 補足事項 nuxtServerInit store/index.jsに記述しています。 beforeEach/afterEach pluginsにファイルを作成して、nuxt.config.jsで読み込んでいます。 fetch fetchは、公式推奨のcontextなし(引数なし)と非推奨のcontextあり(引数あり)の2種類があります。その同時実行はできませんが、流れをわかりやすくするために「fetch(有
はじめに はじめまして。Qiitaの公開投稿は初めてになります。satoruと申します。 今回の記事では、Webエンジニアになりたいけれど未経験だからとにかくポートフォリオをつくらないといけないよなということでtodoSNSというWebサービスを作った（作っている）際の実装内容やそれまでに思ったことを個人的なアウトプットとして述べていこうと思います。 （test@test.com pass:testtest or Google認証では入れます） 流れとしては、自己紹介、実装にかかるまでの準備（利用技術や設計）、実装のはじめからおわり、開発中に思ったこと、まとめで書き連ねていきます。 ※未熟ながら書いているため、指摘箇所等あればコメントいただけると助かります。 自己紹介 大学で情報系の学部を卒業し、SIer会社に就職して約１年半で退職し、紹介で建築事務所の社内SEとしてGSuiteの運用・管
ushironokoのブログです。技術・ゲーム・趣味・仕事など。
こんにちは。@asatoです☀ スプレッドシートをデータベースとして使いたい！ いま話題のTwitterスペースと出会えるプロダクトspaces.bzを開発しています。 GASでTwitter APIをたたいてスプレッドシートに記録するプロトタイプからはじめました。 プロトタイプのあと、「せっかくだからこのスプレッドシートをそのままDBみたいに使えないかなー」と思い、Nuxt + Spreadsheet構成でプロダクトを開発してみたので、体験記をまとめたいと思います！ この記事でやること スプレッドシートからデータを取得して表示するNuxtアプリを作ります。 サンプルのスプレッドシートは以下のようなイメージ。 id name age email
Slides for v-tokyo #20
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
Help us understand the problem. What is going on with this article?
概要 スクラッチでNuxt.jsをTypeScriptを利用して開発する環境作成の手順を確認したかったので、方法を調べつつ実際に作成してみました。 できる限りミニマムな構成で作成したいのと、自分的には理解のブラックボックス化が進みやすいため可能な限りVue CLIやcreate-nuxt-appは使用したくなかったため使用していません。（より簡単に早く、動くものを作りたい場合にはVue CLIやcreate-nuxt-appの利用をおすすめします。） 前提 Nuxt.js 2.14.4を利用 html-property-decoratorを利用 やってみたこと 以下の流れで、index.vueに内容されている子コンポーネントに値を引き渡して表示するアプリケーションを作成してみました。 必要なライブラリのインストール nuxt, nuxt/typescript-build等のインストール p
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
