Vue3プロジェクトをサブドメインで使う話 - Qiita
結構悩みましたが擦りに擦られているネタだと解決後に判明しましたw vue3プロジェクトを作成してそのままbuildするとdistに成果物が発生しますが、それって… サブディレクトリでは動かないのですよ！ その対策を考えたいともいます Vue3プロジェクトの作成 vue3プロジェクトの作成はコマンド一発で作成されます $ npm init vue@latest Vue.js - The Progressive JavaScript Framework - Project name: … vue-sample - Add TypeScript? … No / Yes - Add JSX Support? … No / Yes - Add Vue Router for Single Page Application development? … No / Yes - Add Pinia for
vue.jsとTailWindCSSとday.jsで作るズルいカレンダー - Qiita
カレンダーを作る際にテーブルを作るのも何なのでグリッドレイアウトを使ったらコードもシンプルになりました。 import dayjs from 'dayjs' // 月末の日にち const endDate = dayjs().endOf('month').get('date') // 月初の曜日 const startWeekday = dayjs().startOf('month').get('day') // 配列を作ります。 const dates = computed(() => { let data = [] //月の初めの日までは何もなし for (let i = 0; i < startWeekday; i++) { data.push('') } //日付を追加します。 for (let h = 1; h <= endDate; h++) { data.push(h) }
ワイ「Tailwind CSSで選択したラジオボタンの背景色を変えたいんやけど」 - Qiita
ある日の我が家 ワイ「去年趣味でアプリ作っていたんやが」 ワイ「この頃はあまり見た目に拘ってなかったなぁ」 ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」1 Tailwind CSSを使ってみた ワイ「はぇーBootstrapだけじゃなくて」 ワイ「Tailwind CSSってのもあるんか」 ワイ「前回はBootstrapやったし、Tailwind CSSを使ってみるか」 ラジオボタンをどうにかしたい ワイ「ラジオボタンそのまま表示するのもなんか味気ないな・・・」 ワイ「どれどれ・・・ラジオボタンをボタン風に表示させることもできるんか」2 ワイ「これをTailwind CSSでいっちょやってみっか！」 まず通常通りラジオボタンを配置する ワイ「まずは普通にラジオボタンを配置してみよか」 <body> <div> <input type="radio" name="ce
Nginxで複数ドメインに対応する - Qiita
複数ドメインに対応するためconfを分けていく 大元のnginx.confは以下になります。 nginx.confの設定 user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /var/run/nginx.pid; # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic. include /usr/share/nginx/modules/*.conf; events { worker_connections 1024; } http { log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_se
ブラウザバックしたときに状態を復元する（Vue3, Nuxt3 そして Next.js） - Qiita
ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置
TypeScriptで条件分岐時の可読性の高い変数設定 - Qiita
本記事を対象とする人 TS,JSで極力letではなくconstを使うべきと思っている人 結論 ts-patternが便利 https://github.com/gvergnaud/ts-pattern 解説 何かのオブジェクトを参照して場合分けして、変数を定義したい場合があると思います 例 let platform = ''; if (game.name === 'ff3') { platform = 'fc'; } else if (game.name === 'ff4') { platform = 'sfc'; } const platform = (() => { if (game.name === 'ff3') { return 'fc'; } else if (game.name === 'ff4') { return 'sfc'; } return ''; })(); //--
JSON Schemaを使って各種設定をやりやすくする - Qiita
{ "person": { "description": "A person who has been involved in creating or maintaining this package.", "type": [ "object", "string" ], "required": [ "name" ], "properties": { "name": { "type": "string" }, "url": { "type": "string", "format": "uri" }, "email": { "type": "string", "format": "email" } } } } personの内訳です。 description: 定義の説明。ドキュメントを参照する際にはこのテキストが表示される type: 何の型でプロパティを設定できるのか（プロパティそのものの
PHPStorm起動後のインデックス作成の制御 - Qiita
概要 インデックス作成のバックグラウンドタスクが重い。 インデックス作成対象からディレクトリごとに除外して起動時の動作のもっさり感を解消する。 手順 左側のプロジェクトで除外したいディレクトリを右クリック 「ディレクトリをマーク」→「除外」を選択 フォルダのアイコンが赤く変更される。 効果 再起動後、バックグラウンドタスクで実行されるインデックスの作成にかかる時間が短縮された。(体感で元の4割程度まで減少) ファイル数が大量に存在するタイプのプロジェクトの場合、すべてのディレクトリに対してインデックスの作成を実行すると起動後の動作が遅すぎるので処理に直接影響しないような部分は除外してしまった方がいいかもしれません。 参考
ER図の自動作成ツールを探していたらPhpStormが素晴らしかった件 - Qiita
作成のきっかけ お仕事でEC-CUBE4系を利用することになり、ドキュメントを作成する必要が出てきたのですが、EC-CUBEの開発ドキュメントをみても3系のものしか見当たらなかったので、自分で作成する必要が出てきました。 条件 下記の条件を満たすものを探していました。 既存のDBから生成できる Mysqlに対応している png, jpgなど画像形式で出力できる 検討した自動作成ツール 社内で同じような経験をした人がいないかと思い、slackで問いかけみると「SchemaSpyを使う」「PhpStormのdiagram機能を利用する」「SequelProでER図を出力する」「MySQL Workbenchのreverse engineeringという機能を利用する」というありがたき知恵をたくさんいただきました。 実際に使ったもの PhpStormを利用していることと、手っ取り早くできそうだっ
【Vue3】親<->子間のコンポーネントメソッド発火方法 - Qiita
はじめに こんにちは。 今回はVue3で親子間のコンポーネント内メソッドの発火方法を紹介していきます。 子から親のメソッドを発火させる方法はご存知の方多いと思いますが親から子のメソッドを直接発火させる方法も紹介していますので参考になれば幸いです。 #注意：Vue3 composition apiの記法で紹介しています。 前提：親と子コンポーネントを作成 まずは親コンポーネントと子コンポーネントを作成していきます。 今回は分かりやすいようシンプルなものにしています。 <template> <button @click="emitEvent" > 子コンポーネント </button> </template> <script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default de
Vue Routerのparamsの渡し方の変更点について - Qiita
これまでのparamsの渡し方 これまではcreateRouterで指定した各遷移先にpropsを定義し、画面遷移の際に指定した値をparamsに入れてpushしてあげれば十分だった。 export const router = createRouter({ history: createWebHistory('/'), routes: [ { path: '/', name: 'first', component: FirstPage, }, { path: '/second', name: 'second', component: SecondPage, // ここで遷移元から受け取る変数を定義する。 props: route => ({id: route.params.id, text: route.params.text}), } ] }) しかし現在のVue Router（4.1
【Vue.js】Composition APIについて - Qiita
Composition APIとは Vue.jsの３系から導入された、新しいコンポーネント作成手段です。 React Hooksのように、ロジックや状態を切り出すことを可能にします。 一方、従来からあるSFCファイルにコンポーネントの見た目/状態/ロジックをまとめて記述する作成手段をOptions APIと言います。 Options APIはコードをまとめて書けるが故に、それ以上分割できない不便さがありました。 Composition APIではロジックや状態に関するコードを切り出すことができるため、Options APIの不便さを解消できます。 また、見た目に関するコードとは別々に管理されることにより、ロジックの再利用性が高まります。 とはいえComposition APIはOptions APIを代替えしたり非推奨とするわけではなく、使い分けることが可能です。 Composition
【Vue3】ブラウザでマイク音声を録音する(Composition API) - Qiita
やりたいこと ブラウザで録音するアプリケーションを作ります。 Vue2.xやOptions API で書かれたサンプルコードは色々見つけましたが、Vue3 のComposition API で書かれたコードは見つからなかったので、参考に共有します。 基本 ブラウザでの録音はMediaStream Recording APIを使います。 基本的には以下のソースコードと解説を参考にしました。 MediaStream Recording API の使用 - Web API | MDN 全コード 短いので、テンプレートの全コードを掲載します。 <template> <button @click="startRecording()" v-if="!record.state"> 録音 </button> <button @click="stopRecording()" v-if="record.sta
Atomic Design ベースの Vue コンポーネント設計 - Qiita
以上が Atomic Design で提唱されている5段階です。 よく見ると Atoms, Molecules, Templates はレイアウトとしてのまとまり、 Organisms と Pages はコンテンツベースでのまとまりになっています。 「レイアウトとしてのまとまり」は、中に入る情報に関わらず、見た目・機能単位でのまとまり、 「コンテンツベースでのまとまり」はコンテンツ（データ）単位でのまとまり という分け方になります。 「レイアウトに関心が高い」「コンテンツに関心が高い」それぞれのまとまり方を コンポーネント設計に当てはめると、次のように言い換えられると思います。 ・Atoms, Molecules, Templates はユーザーインターフェースや、 親コンポーネントから渡されたデータをどう表示するかに専念する。 ・Organisms と Pages はコンテンツに関心が高
vue-simple-suggestで読み仮名でもサジェストさせる - Qiita
背景・課題 漢字でリスト表示していても、ひらがな入力時点でサジェストさせたい 漢字に変換するまでサジェストがされないのが不便すぎる vue-simple-suggestのサジェストをカスタマイズする 使っていたのは、vue-simple-suggestでした。既にスタイルが当たっていたのでどうにかしてこれを使いたかったです。 https://github.com/KazanExpress/vue-simple-suggest 結論としては、display-attributeと、filterを指定すれば実装できました。 （ドキュメントに書いてあるけど、filterの指定はわからなさすぎてソースコード読みました ） display-attributeで、どのkeyの値をサジェストのリストに表示するかを指定できます。 filterは入力された値に対してリストの値をどう返すか処理が書けます。 以下
Vue Selectを導入して、いろいろカスタマイズしてみる - Qiita
はじめに 業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。 とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。 （間違いなどあれば、コメントにてご指摘いただければ幸いです。） Vue Selectとは Vue.jsで利用可能なセレクトボックスコンポーネント。 公式サイト 曰く Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component. (HTMLの要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。) この記載通りで、とても手軽にセレクトボックスを実装できる。 さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。 筆者環
VueのビルトインサーバーをDockerコンテナ内で動かしているときにホットリロードが利かない問題 - Qiita
環境 Nodeコンテナ：16.16.0-bullseye npm 8.15.1 @vue/cli 5.0.8 前提 npm run devでサーバーが立ったとか、サーバー再起動すればソース更新分は反映されるとかそういう状態。 対処 プロジェクトフォルダのてっぺんにあるvue.config.jsに、以下を追記する。 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 以下を追記 configureWebpack: { watchOptions: { aggregateTimeout: 300, ignored: /node_modules/, poll: 1000 } } // ここまで }) 参考 If wat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
nginxについてまとめ(設定編)
PhpStormで結合された文字列をヒアドキュメントに置き換える - Qiita
PhpStormの重さ改善 - Qiita
