nuxt

Nuxt.js 自習 1日目「create nuxt-app」

Nuxt.js 自習 1日目「create nuxt-app」

サーバーサイドVueフレームワーク、Nuxt.jsの自習1日目。 セットアップ・node.jsの最新のLTS版をインストールします。 ・yarnをインストールします。 インストールcreate-nuxt-appコマンドでプロジェクトをインストールします。 yarn create nuxt-app <project-name> プロジェクトディレクトリに移動して、yarn dev します。 cd <project-name>yarn dev パッケージが不足してい

【vue-awesome-swiper】画像を配列にしてv-forでグルグル回したら五十肩がラクになった

【vue-awesome-swiper】画像を配列にしてv-forでグルグル回したら五十肩がラクになった

2021.7.21追記「本番環境でエラーになっちゃったら<client-only>で囲うといいかもしれない」 表記のとおりです。 おばちゃんの設定はSSGです。開発環境ではエラーも出ず問題なかったのですが、なんと本番環境で画像がスライダーにならず、表示がおかしなことになりました。 急ぎ、vue-awesome-swiperの箇所(<swiper></swiper>)を<client-only></client-only>で囲みました。 おばちゃんの場合、これで大丈夫でし

4
Nuxt.js + firebase デプロイ備忘録

Nuxt.js + firebase デプロイ備忘録

割とハマったので備忘録です。 同じことをしようとしている記事がいくつかあるけど、どれもアレンジされているので自分用に(なるだけシンプルに)書き残しました。 参考文献・【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版 ・Quick Nuxt.js SSR prototyping with Firebase Cloud Functions ・SSRで作ったnuxt projectをFirebase hostingにデプロイする方法

1
microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

microCMS+Nuxt.jsのブログ個別ページでの前後記事へのリンク設定

「_id.vue」 の <script>タグ全体は、下のような感じです。 <script>import axios from 'axios'export default { async asyncData({ $config, params, error }) { try { const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`, { headers: { 'X-

更新をnoteからQiitaに変更します!

更新をnoteからQiitaに変更します!

先日のtwitterでのアンケートにより WordPressとQiitaの2つで 更新していこうと思います🌟 ご覧いただいた方も多く、 どこでもOK⭕️という方が大半でしたが、 投票を尊重しての結果です🍀 zennはまだ公開したことがないので、 イメージが湧かない方もいたのかな… という印象でした🤔💭 ⬇️今後はこちらをご覧ください💕 今までと同じく WordPressで最初に公開、 その後は手動でQiitaにコピペするので 公開時間に差がありますことを ご了承くださ

TWSNMP FC:ノードリストのソート、ページ、フィルターの状態を保存して再表示する時に復元できるようにした

TWSNMP FC:ノードリストのソート、ページ、フィルターの状態を保存して再表示する時に復元できるようにした

夜中に何度か目が覚めると毎回、猫がカリカリを無言で食べていました。今朝は猫に起こしてもらわずに4時半に自力で起きました。写真は、ウチの猫が若いころ狩りモードで庭を颯爽と歩いている姿です。 昨日できなかったノードリストの状態をページの切り替えでも保存できるようにする機能の開発をしました。 赤い矢印の ・フィルターの設定 ・ソートの状態 ・ページあたりの表示数 ・ページ を保存して再度ノードリストを表示した時に同じ状態で表示できるようにするのが目的です。 ソートやフィルタ

1
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

🎈 WPでも公開中です https://wp.me/pc9NHC-1qd #vue #nuxt #プログラミング #エンジニア 前置き前回の続きです❣️ 型指定, 型宣言をすることで 実行前のコンパイル時に エラーを発見できるTS💕 こんな感じで教えてくれます。 数字で定義したのに 文字列が入っているよ❗️ という内容ですね。 // terminalapp.ts:8:21 - error TS2322: Type 'number' is not assignabl

2
Nuxtでfontawesomeの必要なアイコンを使う

Nuxtでfontawesomeの必要なアイコンを使う

必要なパッケージをインストールします。 yarn add nuxt-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons nuxt.config.js に nuxt-fontawesome の設定を記述 modules: ['nuxt-fontawesome'], fontawesome: { component: "fa", imports: [{

【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

🎈 WPでも公開中です https://wp.me/pc9NHC-1pB #vue #nuxt #プログラミング #エンジニア 前置き型チェックに便利なTS💫 何が良いのか❓ まずはこれを見てください👀 <template> <div class="page"> <button @click="click">click</button> </div></template><script>export default { methods: { click()

2
【Nuxt.js】開発ブログ:カレンダーを作成してみる②

【Nuxt.js】開発ブログ:カレンダーを作成してみる②

🎈 WPでも公開中です https://wp.me/pc9NHC-1o5 前置き 前回の続きです。 カレンダーの作成をしたい📆 前回は必要な情報が何か、 探すのでいっぱいでした😵💦 ということで、 情報の整理からしていきます❗️🧹 続きをやる前に 今一度やり方を見直し、 実装できそうなものから 手をつける方向にしています🌟 前回同様、 思い立ってやってみる系の 日記みたいなものです✍️ dayjsの使い方とよく使うTips とりあえずdayjsを使う際には ここを見な

2