カテゴリー別

文法

Vueと共通

【Nuxt.js】plugin実践編:vue-scrolltoをページ遷移でも適応させよう

前置き vue-scrolltoとはページ内リンク(アンカーリンク)でスクロールしながら指定場所に飛べるもの🌟 ですが、ページ遷移をして遷移先の特定の指定場所にスクロールしたい場合はどうすれば良いのでしょうか❓ ということで今回はそれを実装していきます💫 ⬇️vue-scrolltoの基本的な使い方と 同じページ内での遷移は こちらをご覧ください✨👀【Nuxt.js】plugin実践編:vue-scro ...

Nuxt独自

【Nuxt.js】Nuxt文法編:非同期通信やasyncDataの使い方

前置き 非同期通信について解説していたこちらの記事で間違いがありました。申し訳ございません🙇‍♀️【Nuxt.js】Nuxt文法編:asyncData ということで今回は訂正ver.です。 Contents前置き何が間違っていたのかそもそも非同期通信とは何か勘違いをしていた非同期通信、await、asyncDataの整理非同期通信asyncPromiseのawaitasyncDataまとめ 何が間違っていたのか 【Nuxt.js】Nuxt文法編:a ...

Vueと共通

【Nuxt.js】Sassのバージョンに注意!

前置き ここ1週間でSassが使えなくて困っている😖💦って方いらっしゃいますよね…!? こんなエラーが出ますよね…!?!? Error [Vue warn]: Error in beforeCreate hook: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function   &nbs ...

Vueと共通

【Nuxt.js】Nuxt実践編:シンタックスハイライターを使おう

Contents 前置きhighlight.jsGitHubのマークダウンCSSまとめ前置き シンタックスハイライターを使ってみましょう💫コードを載せたい時に使用するものですね💡 参考https://madogiwa0124.hatenablog.com/entry/2019/01/03/203334https://gurutaka-log.com/nuxt-vue-highlightjs-syntax-highlight#i-2 highlight.js https:// ...

Vueと共通

【Nuxt.js】Nuxt文法編:try/catch

前置き 今回は非同期通信で使うtry/catchをやっていきます💫 JSONplaceholderのpostsデータを取得・表示します。 ⬇️こちらの記事で 非同期通信の基本を解説しています👀 (Promise, async/awaitなど)【Nuxt.js】Nuxt文法編:asyncData Contents前置きtry/catchとはサンプルコードAfterBeforeまとめ try/catchとは [crayon-603bdeca401fc ...


API

firebase

【Nuxt.js】firebase基礎編(Auth版):ログアウトしよう

Contents 前置きログアウトログインも含めたコードまとめ前置き Firebase Authenticationシリーズです💫今回はログアウトのコードですがログインやアカウント作成など前段階は別記事で解説しております🍎👩‍🏫 【Nuxt.js】firebase基礎編(Auth版):メールアドレスログインをできるようにしよう【Nuxt.js】firebase基礎編(Auth版):Twitterログインをできるようにしよう【Nu ...

firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成時に表示名を登録しよう

前置き 今まではメールアドレスとパスワードのみでユーザーを管理していました。 【Nuxt.js】firebase基礎編(Auth版):アカウント作成をできるようにしよう【Nuxt.js】firebase基礎編(Auth版):メールアドレスログインをできるようにしよう 表示名がないと不便なのでこちらを実装していきましょう✨ 参考:QuasarFramework + Firebase で、userの情報を更新する[Firebase][iOS] Firebase Authentication で会 ...

firebase

【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得②

前置き 以前の記事を役割で切り分けてVuex版にしたコードです。【Nuxt.js】firebase基礎編:Cloud Storageで画像アップロード&取得 この2つが一緒になっていて分かりにくかったので切り分けてみました✂︎・選択した画像を送信する・url化してプレビューする Vuexに移行する必要があるのは送信と取得の部分です。 Contents前置きStep1: 送信するコードを考えるVuexに移行する前のコードVuex移行後のコードStep2: プレビューするコードを書き足すStep ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ⑤

前置き チャットシリーズようやくCSSです✨笑 初めにデザインを決めていなかったのでざっくりですが、整理していきました。そのためSP対応も未完ですが、⬆️上の画像イメージを元に作成しています🍎 今後はこの辺をやっていきたいですね🎈🧸・SP対応・スクロール、スクロールボタンの実装・エディタの使用 (選択テキストをコード化させる)・日付に応じて「今日」「昨日」の表示 Contents前置きメッセージを吹き出しにする画像と ...

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ④

前置き チャットシリーズの続きです✨今回はVuexに移行していきます❣️これが終わったら本当にCSSです…😂笑 【Nuxt.js】開発ブログ:firebaseでチャットアプリ①【Nuxt.js】開発ブログ:firebaseでチャットアプリ②【Nuxt.js】開発ブログ:firebaseでチャットアプリ③ Contents前置きVuexに移行まずは取得データのpostsを移行loginを移行画像部分の移行textareaの選択した文字に装飾(ボツネタ ...


製作

アプリ サイト

【Nuxt.js】Nuxt実践編:ユーザーアイコン表示の切り替えをしよう

前置き 今回は簡単な実践編です😉💕作るものはこちら! マイページのあるサイトで⬆️ユーザーアイコンの初期状態と⬇️画像を設定した時の表示の切り替えをやってみましょう💃🎶 コンポーネント間のやりとりや演算子の復習になるのでぜひチャレンジしてください🔥💪 今回のような簡単な実践編も今後増やしていこうと思ってます💕 Let's try! Cont ...

制作

【Nuxt.js】Nuxt番外編:
アトミックデザインにおけるフォルダの分け方と
サンプル集

前置き コンポーネントの分類の仕方についてと少しですがサンプルコード集です🎈🧸 この要素はどこ❓molecules❓それともorganisms❓なんて時にチェックしてください✅🌟 フォルダ分けはアトミックデザインを推奨しています。Atomic Designとはサンプルコードもあるのでコンポーネントの命名や中身の構成などの参考にもお役立てください❤️コードを書き始める前のチェッ ...

制作

【Nuxt.js】Nuxt番外編:コードを書く前のルールチェックリスト

前置き さぁコード書くぞ✨✊の前にチェックしておくと良いことをまとめました✅ デザインができている前提です! コンポーネントの分け方が曖昧でどこにあるか分からんっっ😖💦 とか クラス名をつけずにタグに直接cssあてたら親にも影響出ちゃってどこを直せばよいのっっ😨💦 とか 変なことがなくなるように予め知っておいた方が良いことをまとめました! Contents前置きコンポーネントの分け方アトミックデザイン ...

アプリ サイト

【Nuxt.js】Nuxt実践編:axios + asyncData + nuxt-link

前置き お試しAPIのJSONplaceholderを使って遊んでみましょう⚡️🎸 タイトルを表示させ、クリックでidに合わせた動的リンクを行います🌟 データはこちらを使用します💡https://jsonplaceholder.typicode.com/posts axios, asyncData, nuxt-linkなどなど復習できることが沢山😉❤️できるところはやる必要がないのでドン ...

アプリ サイト

【Nuxt.js】Nuxt実践編:layout

前置き layoutの実践編です🤗💕基礎は文法編でご確認ください👀https://wp.me/pc9NHC-A4 タブレット以下のサイズになったらハンバーガーメニューを表示させましょう🌟 Let's try! Contents前置き構成を考えるassetsの下準備HeaderDefaultの作成MenuDefault.vueの作成layouts/default.vueの作成まとめ 構成を考える まずは全体の構成をイメージしましょうǹ ...


そのほか

GitHub

【Nuxt.js】GitHub:Dependabotでパッケージ更新

前置き パッケージの更新って面倒ですよね…🙄いちいちバージョンの確認からしないといけません。 面倒なアレコレを解決するのがこちら💫Dependabot ということで、こちらを使ってみましょう💖 参考: Dependabotを導入してみたDependabotで依存パッケージ更新のプルリクを作成してもらう Contents前置きDependabotとは導入方法GitHubのMarketplaceでインストールダッシュボードから設定まとめ Dependabotとは ...

開発ブログ

【Nuxt.js】開発ブログ:marked.js + highlight.js + firebase

前置き 【Nuxt.js】Nuxt実践編:シンタックスハイライターを使おうこちらの記事でシンタックスハイライターを使用した際タグのエスケープが面倒なのでmarked.jsと組み合わせて検証するというところで終わりました。ということで今回は検証!そしてfirebaseとの連携も検証! 結論と使用用途 タグのエスケープ不要で簡単に作成できました❤️ ということでこのエディタはオフラインでもマークダウンの確認ができてあとからブログなどにコピペするといった使い方がメインになりそうです& ...

開発ブログ

【Nuxt.js】WYSIWYGエディター: Quillを使ってみた

前置き WYSIWYGエディタのQuillを使ってみました🍎✨前回チャットアプリを作成していて「シンタックスハイライターを使いたいなぁ〜 どうせならエディタで色々やりたいなぁ〜」ということで今回は人気のQuillを選びました💕 WYSIWYG(ウィジウィグ)エディターとは、ユーザーが編集画面で見ているものと、完成形の見た目が同じになるように作られているエディターのこと。「What You See Is What You Get(あなたが見たものを、そのまま出力 ...

開発ブログ

【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

前置き 今回は番外編としてインデントの自動整形をしてくれる便利なplugin prettierのご紹介です🍒 エディターはVSCodeを使用しているのでその導入手順をお伝えします🌟 まずはどんなものか、目で見てもらった方が早いので⬇️こちらをご覧ください✨👀 こちらはcssをhtmlからcssファイルへ移動、編集してcommand+S でセーブしている動画です。セーブすると自動でインデントを揃えてくれますɲ ...

開発ブログ

【日記】2日目:STUDIOからhtml&cssにしたい と言われたのでやってみた

ということで検証みながらコードに直す作業👀気づいたことをいくつか。 実装がメインなので本当にメモ程度ですが笑記録として残しておきます✍️ また気づきがあれば追記していくかもしれません💡 Nuxtばっかり触っていたので急に素のHTML&CSSと言われるとあれ?何するんだっけ?🐣となります😂笑 CSSだとクラス名毎回つけてどこの区画か分かるようにどうしても長くなるので嫌なんですよね😖(命名得意に ...


小ネタ

更新予定

© 2021 aLiz Nuxt