Summary nextjs+typescript環境にjestをインストールする機会があったので、設定した手順をメモしておく。 install npm install @nuxtjs/dotenv npm install --save-dev jest @types/jest ts-jest setting package.jsonファイルに下記の記述を追記する "scri…

はじめに Nuxtjs＋Expressで構築したシステムでP DFの作成及びダウンロードする機能の実装をする必要があり、技術的に調査した結果を下記にまとめました。 NodejsでPDFを生成できるライブラリ NodejsでPDFを生成できるライブラリをいくつかピックアップして…

はじめに 下記のライブラリをインストールする github.com インストール npm install vue-select 設定 plugins/vue-select.jsファイルを作成する import Vue from "vue"; import vSelect from "vue-select"; Vue.component("v-select", vSelect); nuxt.confi…

はじめに 下記のドラック＆ドロップのライブラリをnuxtjsに適用してみる github.com インストール npm install vue-dnd-zone コード pages/test.vueファイルを作成する <template> <div> <div class="simple-page"> <Container @drop="onDrop"> <Draggable v-for="item in items" :key="item.id"> <div class="draggable-item"> {{ item.data }} </div> </Draggable> </container></div></div></template>

Options APIの場合 components/test.vueファイルを作成して下記のように記述する <template> <div> Name: {{ fullName }} Message: {{ message }} </div> </template> <script lang="ts"> import Vue, { PropOptions } from 'vue' interface User { firstName: string lastName: string } export default Vue.ex…

参考ページ 下記のサイトを参考に設定する typescript.nuxtjs.org typescriptの設定 インストール # npm i @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime nuxt.config.jsファイルのbuildModulesを下記のように修正する buildModules: [ ['@n…

手順 vercelの設定をする前に自分のgithubアカウントでvercel用のリポジトリを作成する。privateでもpublicでも大丈夫そう。 vercelでアカウントを作成する。※githubアカウント連携 vercel.com vercelでアカウント作成後、ログインする。clone templateをnux…

参考ページ アプリ全体で関数や値を利用できるようにしたい場合があります。 これらの変数をVueインスタンス（クライアント側）、コンテキスト（サーバー側）、さらにはVuexストアに挿入できます。 これらの関数の前に$を付けるのが慣例です。 Nuxt.jsは、こ…

はじめに 下記のプラグインを利用してnuxtjsにインストールして利用する github.com nuxtjs用のプラグインがあったがスターの数が少ないため、lazysizesをインストールする github.com インストール 下記のコマンドでインストールを行う yarn add lazysizes …

参考資料 下記のvue-multiselectをnuxtjsに適用する vue-multiselect.js.org 下記のnuxt-vue-multiselectパッケージもあるが、スターが少ないので、やめておく。 github.com インストール yarn add vue-multiselect nuxtjsの設定 plugins/vue-multiselect.js…

store内でapollo clientを利用 参考ページ github.com github.com サンプルコード this.app.apolloProvider.defaultClientを利用してqueryを呼び出す import categoriesQuery from '@/queries/categories' export default { namespace: true, state: () => (…

参考ページ 下記のページの手順の場合、途中でエラーが出るので、少し手順を変えてインストールしてます。 tailwindcss.com インストール 下記のインストールだとエラーが発生する yarn add @nuxtjs/tailwindcss tailwindcss 下記のように指定してインストー…

nuxtjs/toastの場合 参考URL github.com インストール yarn add @nuxtjs/toast 設定 modules: [ '@nuxtjs/toast' ], toast: { // 右上にtoastを表示 position: 'top-center', // 特に指定しなくても5秒で消えるように設定 duration: 5000 } 実装 methods: { …

参考ページ github.com インストール yarn add cross-env 環境ごとの設定ファイルを作成する configフォルダを作成して、その中に各環境の設定ファイルを作成する -config/env.development.jsファイルを作成して下記のように記載する module.exports = { api…

参考ページ element.eleme.io コード <template> <el-container> <el-header>Header</el-header> <el-main> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"> <el-form-item label="Activity name" prop="name"> <el-input v-model="ruleForm.name" /> </el-form-item> </el-form></el-main></el-container></template>

参考ページ https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading/ 設定 nuxt.config.jsファイルを下記のように設定する loading indicatorプロパティはぺージ読み込み中にローディングインジケータを表示する設定。最初の読み込み…

インストール # yarn create nuxt-app <プロジェクト名> # cd <プロジェクト名> # yarn add element-ui # yarn add sass-loader # yarn add sass 設定 plugins/elementUi.jsファイルを作成し、下記のように記述する import Vue from 'vue' import ElementUI …

参考URL www.npmjs.com インストール $ yarn add @nuxtjs/gtm 設定 nuxt.config.jsファイルに下記の記述をする enabledをtrueを指定しないとリクエストが送信されない。 export default { modules: [ '@nuxtjs/gtm', ], gtm: { id: 'GTM-XXXXXXX', enabled: …

はじめに 下記のページを参考に実装してみる strapi.io 更新系クエリーの作成 queries/article-create.gqlファイルを作成し下記のように記述する mutation createArticle($title: String, $details: String) { createArticle(input: { data: { title: $title…

はじめに 下記のページを参考に実装してみる strapi.io インストール yarn add @nuxtjs/apollo graphql 設定 nuxt.confg.jsファイルを下記のように記述する modules: [ '@nuxtjs/apollo' ], apollo: { clientConfigs: { default: { httpEndpoint: process.en…

はじめに ブラウザをリロードするとvuexのstoreのデータが削除されてしまうため、vuex-persistedstateを利用してみる。 インストール yarn add vuex-persistedstate github.com 保存先にセッションストレージを利用する場合 window.sessionStorageを指定する…

はじめに nuxtjsでファーストビューで途中までテキストを表示して、ユーザーがリンクまたはボタンをクリックしたら、全テキストを表示するサンプルを作成してみた。 コード Case1（テキスト） - components/Readmore.vueファイルを作成して下記のコードを記…

はじめに 最近、nuxtjsを触っているので、vuexを使ってみる px-wing.hatenablog.com px-wing.hatenablog.com storeの設定 store/auth.jsというファイルを作成して下記のように記述する export default { namespace: true, state: () => ({ loginAccount: '',…

はじめに nuxtjsでページ内リンクする方法を調べてみたところ２つ方法を見つけましたが、１回目の遷移は正しく動作しますが、２回目以降が動作しないことがわかりました。この２回目以降の対応方法が見つからず。 １つ目の方法 vue-routerの機能で実装する方…

はじめに 下記のサイトから利用するgoogle fontを選択する fonts.google.com 利用する情報は下記の赤枠の情報をnuxtjs内で設定します。 nuxtjsに設定する nuxt.config.jsファイルに下記の記述を追加する // Global page headers (https://go.nuxtjs.dev/conf…

はじめに 前回、vuetifyjsのインストールしたので、vuetifyjsで色々と設定を変更してみる。 px-wing.hatenablog.com 下記のページを参考に自分のローカル環境で試してみる vuetifyjs.com 設定 assets/variables.scssというファイルを作成して下記のコードを…

はじめに 下記のvuetifyjs css Frameworkをnextjsに適用する vuetifyjs.com インストールと設定 $ yarn add @nuxtjs/vuetify $ yarn add vee-validate nuxt.config.jpファイルに下記の記述を追加する buildModules: [ (省略) '@nuxtjs/vuetify' ], vuetifyjs…

はじめに 前回、dockerでnuxtjs環境をdockerで作成したので、nuxtjsでstrapiを実行する px-wing.hatenablog.com strapi側では前回に住所情報を返すAPIを作成しているので、そちらのAPIを呼び出してみる。 px-wing.hatenablog.com モジュールのインストールと…

はじめに strapiの環境を構築したので、nuxtjs環境を構築してstrapiのAPIを実行する環境を構築する px-wing.hatenablog.com docker関連の設定 下記の設定はdocker-compose up -dで全てが起動される環境ではありません。nginxは自動起動します。 docker-compo…

Vuetifyの勉強方法 数あるCSSフレームワークのなかで、自分はVuetifyを選択した理由はBootstrapよりもコンポーネントが多く。デザイナーではない自分にはCSSをゴリゴリにいじらなくても簡易的なデザインであれば出来るのかと思い選択してみました。ですがど…