nuxt

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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-ye

# 前置き

今回は簡単な実践編です😉💕
作るものはこちら!

マイページのあるサイトで
⬆️ユーザーアイコンの初期状態と
⬇️画像を設定した時の
表示の切り替えをやってみましょう💃🎶

コンポーネント間のやりとりや
演算子の復習になるのでぜひチャレンジしてください🔥💪

今回のような簡単な実践編も
今後増

もっとみる
スキありがとうございます!よければシェアお願いします♪
1

おじさんSEがNuxt.jsを触ってみて感じたこと3つ【楽ではないがやれなくもない】

こんにちは、昔はバリバリC++プログラマだったと栄光を懐かしむ、たくろーー(悲)です。

昔はC++言語とかで開発してましたが、最近のWeb周りの知識は全然ないけど、Nuxt.js触ってみた話です。

自分が欲しいアプリを開発しようとしたら、紆余曲折してNuxt.jsに流れ着きました。

選択肢としては、FlutterやGoなどもありましたが、悪くはなかったかなと思います。

Nuxt.jsなどの

もっとみる
ありがとう あなたの愛は最高だ
5

[Nuxt][TypeScript] Property '$i18n' does not exist on type 〜を解消する

やりたいこと

242:17 Property '$i8n' does not exist on type 'AccountSignupController'. 240 | 241 | get locale () { > 242 | return this.$i8n.locale | ^ 243 | } 244 |

もっとみる

【Nuxt.js】Nuxt実践編:あると便利なコピーボタンの作り方

🎈 この記事はWP専用です
https://wp.me/pc9NHC-xv

# 前置き

ここ最近は文法編に力を入れていたので
久しぶりの実践編です✨

input内のテキストを
コピーするボタンを作ってみましょう♪
イベントアプリなどでページを作成し、
自動生成されたurlをコピーしたい時なんかに使えます🌟

urlの自動生成まではやりません。
あくまでinputとコピーボタンのみ作成しま

もっとみる
スキありがとうございます!よければシェアお願いします♪

[読書記録]「Auth0」で作る!認証付きシングルページアプリケーション (技術の泉シリーズ(NextPublishing))

今回読んだ本

「Auth0」で作る!認証付きシングルページアプリケーション (技術の泉シリーズ(NextPublishing)) 

バタバタしてて,久しぶりの投稿になりました.

仕事でAuth0を使う雰囲気があったので,事前準備をしようと思い読みました.簡潔に感想をいうと,自分が求めていたものとはちょっとズレてたなと思いました.

僕が求めていたのは,Auth0を使って色々と手を動かせるチュ

もっとみる

【Nuxt.js】Nuxt文法編:computed

🎈 この記事はWP専用です
https://wp.me/pc9NHC-wY

# 前置き

今回はcomputed🌟
getter関数とsetter関数が使える
算出プロパティです!

簡単な使い方や
methodsとの違いを解説しています🙋‍♀️

# computed

## 簡単な使い方

テキストを反転させます🎈

【index.vue】
プロパティなので呼び出す際は
{{ rev

もっとみる
スキありがとうございます!よければシェアお願いします♪
1

Nuxt(node.js)でsanitize-htmlの許可タグ・属性をいじる方法

エンジニア向けの記事です。サニタイズをしたいけど、タグや属性は色々指定できるようにしたいという人向けの記事です。

結論

pluginsを作りましょう。そこで許可属性を記述しましょう。

まずはパッケージの読み込みから。yarn add sanitize-htmlで読み込めます(npmだったらnpm install)。

/nuxt.config.js
ここでpluginを呼び出します

exp

もっとみる

【Nuxt.js】Nuxt文法編:fetch

🎈 この記事はWP専用です
https://wp.me/pc9NHC-vM

# 前置き

非同期通信に使えるfetchをご紹介🌟

APIからデータを取得する方法は2つ!
fetch
asyncData

2つの違いについても解説しました🎀👩‍🏫

⬇️asyncDataの記事はこちら

# asyncDataとの違い

## 値のセット先が違う
asyncData:直接コンポーネント

もっとみる
スキありがとうございます!よければシェアお願いします♪
1

【Nuxt】axios-mock-adapterを使ったGetがSSR時にRequest failed with status code 404

メモです

呼ぶ側 - (repository.ts)

import { NuxtAxiosInstance } from '@nuxtjs/axios'export class Repository { constructor(private axios: NuxtAxiosInstance) {} async get(): Promise<string> { const response

もっとみる

Nuxt.jsでSASSにprocess.env.xxx

環境変数をHTMLとSASSで使いたく、しばらく方法を探していて一応みつけた。(深くは検証してない)

やりたいことは伝わると思うので、よりスマートな方法をコメントしてください。

要点

sass-loaderのoption、prependDataで行をねじ込める機能があるぽいのでそれを利用。
でも、Nuxtではsass-loaderのoptionにアクセスしずらかった。

例(breakPoi

もっとみる
恐縮です。。。!