refinement: selection of libraries and frameworks

[ubugeeei]

Concept

• Make it maintainable by anyone
• Choose tools and practices that are as official/community-recommended or community-originated as possible

libraries and frameworks

Basics

• Nuxt (SSG)
• TypeScript
• Node.js (LTS)
• pnpm v9

Styling

• UnoCSS

Linter and Formatter

• @nuxt/eslint
• @antfu/eslint-config
• eslint-plugin-vuejs-accessibility

Testing

• @nuxt/test-utils
• vitest

Other Nuxt Modules

• @nuxtjs/seo
• @nuxt/i18n
• @nuxt/image
• @nuxt/scripts (ga)
• @nuxt/icon
• @nuxtjs/color-mode

Others

• bump
• VueUse (partialy)

[ubugeeei]

relates: #31

[ryoAccount]

I watched Nuxt Nation yesterday.
I thought I want to use Nuxt icon that Anthony spoke.

https://github.com/nuxt/icon/

[oliver139]

Including VueUse would also be great for development.
https://vueuse.org/
https://nuxt.com/modules/vueuse

---

bumpp can be considered for easy releasing new version
https://www.npmjs.com/package/bumpp

---

simple-git-hooks and lint-staged for adding git hook that auto lint the staged files on commit
https://github.com/toplenboren/simple-git-hooks
https://github.com/lint-staged/lint-staged

Example setup in package.json

{
  "scripts": {
    "prepare": "simple-git-hooks",
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*": "eslint --cache --fix"
  },
}

---

If UI component library is neeeded, primevue can be considered.
Well maintained and documented, as well having good accessibility support.
https://primevue.org/

[ubugeeei]

Thanks!

Including VueUse would also be great for development.

Good, let's introduce it partially if there are parts that could be used.

bumpp can be considered for easy releasing new version

It's great!

simple-git-hooks and lint-staged for adding git hook that auto lint the staged files on commit

I don't like the idea of local commits taking too long, and I prefer to do the checking in gha.

If UI component library is neeeded, primevue can be considered.

As for the component libraries, I do not think they are necessary in this case.
For a simple website like this one, the disadvantages of depending on component libraries for the UI are greater than the advantages of using component libraries.
UnoCSS will suffice.

[oliver139]

vueuse
I remembered that it supports tree-shaking, so you may just introduce the whole library and take the advantage of auto-importing.

primevue
I agree that a simple website may not need a UI library.
But I saw you included eslint-plugin-vuejs-accessibility for Linter, which I believed that you want to be aware of the accessibility of the site and I think that a good UI library may help on this point.
So just a suggestion if you need one haha

[ubugeeei]

Yep!
I'm planning to implement the UI with lint and UnoCSS, and I have some friends who are active in the a11y community, so I'm planning to have them review it.
Thanks for the suggestion!

[oliver139]

So great that you have friends familiar with a11y
It is so complicated😵‍💫