【プロフィールページ第14回】Nuxt3への移行 - ライブラリ導入

プロフィールページを作成していきます。

プロフィールページカテゴリーの記事一覧 - スマレジエンジニアyushiのブログ

技術スタックは下記の通りです。

Nuxt.js
SCSS
Tailwind CSS

今回はライブラリの導入をします。

Tailwind CSS

本プロフィールページはTailwind CSSを利用していますので、導入します。

tailwindcss.com

Tailwind CSSを直接導入するのではなく、Nuxt Integration版を利用します。

tailwindcss.nuxtjs.org

npm i -D @nuxtjs/tailwindcss

設定を追加します。

(nuxt.config.ts)

 export default defineNuxtConfig({
  devtools: { enabled: true },
+  modules: ['@nuxtjs/tailwindcss'],
 })

prettier

formatterとしてprettierはほぼ必須かなと思います。

prettier.io

prettierの難点というか、意見の分かれるところと言えば、カスタマイズ性がほとんどないことです。
これはprettierの思想に関わる部分です。
実際細かいところで違和感があることもありますが、全体としてはメリットが大きいです。

prettier.io

npm i -D prettier

設定を追加します。

(.prettierrc.yml)

singleQuote: true
semi: false

コマンドを追加します。

(package.json)

{
  ...
  "scripts": {
    "prettier": "prettier -c .",
    "prettier:fix": "prettier -w .",
    ...
  }
  ...
}

Sass

Sassの除去は検討中ですが、移行のためいったんSassを導入します。

sass-lang.com

npm i -D sass

ESLint

linterとしてはESLint一択かなと思います。

eslint.org

ESLintの他、vue・TypeScript・Prettierとの連携のためのライブラリも同時に導入します。

npm i -D eslint eslint-plugin-vue @typescript-eslint/parser eslint-config-prettier

設定ファイルも追記します。

root: true
env:
  browser: true
  node: true
parser: 'vue-eslint-parser'
parserOptions:
  parser: '@typescript-eslint/parser'
extends:
  - 'eslint:recommended'
  - 'plugin:vue/vue3-recommended'
  - 'prettier'

コマンドも追加します。

(package.json)

{
  ...
  "scripts": {
    "eslint:fix": "eslint --fix '**/*.{js,ts,vue}'"
    ...
  }
  ...
}

Pull Request

https://github.com/nek0meshi/profile/pull/25

あとがき

あっという間に寒くなり、もこもこのフリースを着て過ごしています。