sumisima.com

Nuxt.js を Vuetify と使う

UI フレームワークである Vuetify.js を Vue.js の WEB フレームワークであるNuxt.jsと一緒に利用します。 UI コンポーネントが豊富に用意されているのでデザインが苦手な人でもそれなりの見た目のサイトを作ることができます。

環境構築

基本は公式ドキュメントを参考に、 CLI の表示に従ってインストール。Vue のバージョンは 2 系、インストールには Yarn を利用します。UI フレームワークの選択肢に Vuetify.js があるのでそれを選択。

yarn create nuxt-app <project-name>

LP なのでレンダリングは SSG を選択することで表示速度を重視

? Project name: <project-name>
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: None
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

完了後はダイアログの表示通りにプロジェクトを開いて実行して完了。

参考サイト

Nuxt.js https://nuxtjs.org/docs/get-started/installation/
Vuetify https://vuetifyjs.com/en/getting-started/installation/