これは lottieで作ったアニメーションをNuxt.jsのページローディングで使う方法。 まずlottieで読み込むアニメーションファイルを作成。 ここでは、loading.jsonというファイルで用意した。 保存先はassets/animation/loading.json https://lottiefiles.com/ (サイトに様々なexampleが用意されているので参考に） player installation lottieをwebで使うためにlottie-webというnpmをinstallする。 see https://github.com/airbnb/lottie-web with npm npm install lottie-web with yarn yarn add lottie-web loading animation component jsonを読みこむコ
Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project. And now, after implementing a few projects with this
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
はじめに 今回は前回の記事で作ったブログのプレビュー画面をNuxt.jsで作ったので まとめておきます。 ヘッドレスCMSにおけるプレビュー画面は、どうするのか完全に自由なので こちらを一つの参考にしてください。 実行環境 macOS 10.15.5 node.js 12.18.2 Yarn 1.22.4 Nuxt.js 2.14.0 ヘッドレスCMSにおけるプレビュー画面 ヘッドレスCMSのデメリットとして、プレビュー画面がないことが挙げられます。 これはビューがないヘッドレスCMSのメリットの裏返しなのですが、自分で作る必要があります。 と言ってもNuxt.jsやNext.jsだったりを使っていればさほど手間のかかる作業ではないので安心してください。 プレビュー画面でのNuxt.jsのデプロイモード 前提としてNuxt.jsのモードには Universal (SSR) Generate
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
Nuxt.js + Netlifyで問い合わせフォームを作る方法【自動返信あり】｜notes by SHARESL
Nuxt.js + Netlify この組み合わせはここ数年のトレンドですかね。直近で言うと、東京都が作った新型コロナウィルス対策サイトがこの構成で作成され公開されたと話題になりました。 東京都 新型コロナウイルス感染症対策サイト https://stopcovid19.metro.tokyo.lg.jp/ このサイトはソースコードもGitHubで公開されており、大変参考になります。 tokyo-metropolitan-gov / covid19 https://github.com/tokyo-metropolitan-gov/covid19 今回はそんなNuxt.js + Netlifyでお問い合わせフォームを作ってみます。 Nuxt.jsって？ Nuxt（ナクスト）はVue.jsをベースにしたJavaScriptフレームワークです。 そもそもVue.jsもフレームワークなのですが、
自己紹介 はじめまして、今年3月に中途入社しましたAI/IoTサービス開発部のIoTサービス開発ユニットの下村です。現在、OPTiM IoTでフロントエンド開発をしております。 今回は、そのOPTiM IoTで取り入れたNuxt.js + TypeScriptの新規プロジェクト作成についてご紹介致します。 目次 自己紹介 目次 はじめに 新規プロジェクトの作成 ディレクトリ構成を変更する store環境構築 コンポーネントからstoreを呼び出す まとめ はじめに OPTiM IoTプロダクトでは、Nuxt.js及びTypeScriptを初めて触るメンバーがほとんどでしたが、そんな中Nuxt.jsとTypeScriptで開発を進めるに至った経緯についてご説明します。 そもそもNuxt.jsとは、Vue.jsをベースとしたフレームワークです。 Nuxt.jsの特徴の一つとしてあげられる、ペー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsでLottieアニメーションをページローディングで使う - Qiita
Universal application code structure in Nuxt.js
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
microCMSにおけるプレビュー画面の作り方(Nuxt.jsの場合) - Qiita
『Nuxt.js + Firebaseで釣具の管理サービスを作った - to-R Media』へのコメント
Nuxt.js + TypeScriptで新規プロジェクト作成 - OPTiM TECH BLOG