Nuxt3(SSR)でVuetifyを使えるようにする
Nuxt3 Vuetify Vuetify Nuxt3 Vuetify Vuetify This article is a tutorial on how to use Vuetify with Nuxt3. It covers the installation of Vuetify, setting up Vuetify as a plugin for Nuxt3, and preparing the page to be displayed. The article also includes instructions on how to check the operation of Vuetify.
by JanitorAug 10, 2023
もともとSPA(Vue)でウェブサイトを作成していたのですが、どうせならSSRまでやってみるかと思い、現在はこのウェブサイトはNuxt3で動作しています。SPAと比較するとSSRは敷居が高いよ、というような雰囲気の記事が多く、実際に自分の中で「型」のようなものが出来上がるまでの調査期間が2週間程度かかってしまいましたが、一度「型」のようなものが出来上がってしまえば、サクサクと進みました。私と同様にSPAで作成してみたけどSSRどうしようかなと思っている方や、さっさと基盤となるものを用意・製造開始・SPAからSSRに変更したいんだけど。。。という方の参考になれば幸いです。
もともとSPA(Vue)でウェブサイトを作成していたのですが、どうせならSSRまでやってみるかと思い、現在はこのウェブサイトはNuxt3で動作しています。SPAと比較するとSSRは敷居が高いよ、というような雰囲気の記事が多く、実際に自分の中で「型」のようなものが出来上がるまでの調査期間が2週間程度かかってしまいましたが、一度「型」のようなものが出来上がってしまえば、サクサクと進みました。私と同様にSPAで作成してみたけどSSRどうしようかなと思っている方や、さっさと基盤となるものを用意・製造開始・SPAからSSRに変更したいんだけど。。。という方の参考になれば幸いです。
Jump Links
1.AWSのCloud9でIDEを作成
2.インストール
3.表示するページの準備
4.動作確認
5.おわりに
1.AWSのCloud9でIDEを作成
1.AWSのCloud9でIDEを作成
AWSにアクセスしてcloud9で「環境を作成」を押してIDEを作成します。すでに作成されている方は不要です。「t3.small」だとメモリ不足、「m5.large」はちょっと高いな、ということで「t3.medium」を選択しています。
AWSにアクセスしてcloud9で「環境を作成」を押してIDEを作成します。すでに作成されている方は不要です。「t3.small」だとメモリ不足、「m5.large」はちょっと高いな、ということで「t3.medium」を選択しています。
2.インストール
2.インストール
cloud9のIDEを開き、下記コマンドを実行します。やっていることを箇条書きすると下記３点です。
・Nuxt3をインストール
・プロジェクトフォルダに移動して、Vuetifyを使えるようにするためのインストール
・VuetifyをpulginとしてNuxt3に使わせる設定
cloud9のIDEを開き、下記コマンドを実行します。やっていることを箇条書きすると下記３点です。
・Nuxt3をインストール
・プロジェクトフォルダに移動して、Vuetifyを使えるようにするためのインストール
・VuetifyをpulginとしてNuxt3に使わせる設定
コマンド
npx nuxi@latest init nuxt3Study
cd nuxt3Study
npm install -g yarn
yarn add vuetify@next sass
yarn add @mdi/font
yarn add vite-plugin-vuetify
mkdir plugins
touch plugins/vuetify.js
コマンド
npx nuxi@latest init nuxt3Study
cd nuxt3Study
npm install -g yarn
yarn add vuetify@next sass
yarn add @mdi/font
yarn add vite-plugin-vuetify
mkdir plugins
touch plugins/vuetify.js
plugins/vuetify.jsの修正
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
ssr: true,
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
plugins/vuetify.jsの修正
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
ssr: true,
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
tsconfig.jsonの修正
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"node"
],
"noImplicitAny": false
},
}
tsconfig.jsonの修正
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"node"
],
"noImplicitAny": false
},
}
nuxt.config.tsの修正
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
devtools: { enabled: false },
components: true,
css: [
'vuetify/lib/styles/main.sass',
'@mdi/font/css/materialdesignicons.min.css',
],
build: {
transpile: [ 'vuetify' ],
},
router: {
trailingSlash: false
},
modules: [
async ( options, nuxt ) => {
nuxt.hooks.hook("vite:extendConfig", ( config ) =>
config.plugins.push( vuetify() )
);
},
],
})
nuxt.config.tsの修正
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
devtools: { enabled: false },
components: true,
css: [
'vuetify/lib/styles/main.sass',
'@mdi/font/css/materialdesignicons.min.css',
],
build: {
transpile: [ 'vuetify' ],
},
router: {
trailingSlash: false
},
modules: [
async ( options, nuxt ) => {
nuxt.hooks.hook("vite:extendConfig", ( config ) =>
config.plugins.push( vuetify() )
);
},
],
})
参考にさせて頂いたウェブサイトのURL
https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html
参考にさせて頂いたウェブサイトのURL
https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html
3.表示するページの準備
3.表示するページの準備
layoutsフォルダを作成し、default.vueを作成し、app.vueを修正します。
layoutsフォルダを作成し、default.vueを作成し、app.vueを修正します。
default.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VApp>
<VMain class="default">
<NuxtPage />
</VMain>
</VApp>
</template>
default.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VApp>
<VMain class="default">
<NuxtPage />
</VMain>
</VApp>
</template>
app.vueの修正
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
app.vueの修正
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
pagesフォルダを作成し、index.vue、pageA/index.vue、pageB/index.vueを作成してそれぞれ下記のようにしてページ遷移確認用のページを作成していきます。
pagesフォルダを作成し、index.vue、pageA/index.vue、pageB/index.vueを作成してそれぞれ下記のようにしてページ遷移確認用のページを作成していきます。
index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid>
<VRow no-gutters>
<VCol cols="6">
<NuxtLink to="/pageA">
pageA
</NuxtLink>
</VCol>
<VCol cols="6">
<NuxtLink to="/pageB">
pageB
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid>
<VRow no-gutters>
<VCol cols="6">
<NuxtLink to="/pageA">
pageA
</NuxtLink>
</VCol>
<VCol cols="6">
<NuxtLink to="/pageB">
pageB
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageA/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageA.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageA/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageA.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageB/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageB.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageB/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageB.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
4.動作確認
4.動作確認
package.jsonにstartを追加し、buildして動作確認します。図のような画面が表示され、リンクをクリックしてページが遷移すれば成功です。VContainer、VRowなどのVuetifyのAPIが動作することが確認できました。
package.jsonにstartを追加し、buildして動作確認します。図のような画面が表示され、リンクをクリックしてページが遷移すれば成功です。VContainer、VRowなどのVuetifyのAPIが動作することが確認できました。
package.jsonの修正
"start": "HOST=0.0.0.0 PORT=8080 node .output/server/index.mjs" // scriptsに追加
package.jsonの修正
"start": "HOST=0.0.0.0 PORT=8080 node .output/server/index.mjs" // scriptsに追加
コマンド
yarn build
yarn start
コマンド
yarn build
yarn start
5.おわりに
5.おわりに
CSSの経験を積み重ねてきた人の武器を、丸ごと使わせてもらえるようなイメージのVuetifyはとても便利ですよね。Vuetifyを入れて、ページ遷移まで確認できれば後はなんとかなりそうだな、と思っていらっしゃる方の参考になれば幸いです。
CSSの経験を積み重ねてきた人の武器を、丸ごと使わせてもらえるようなイメージのVuetifyはとても便利ですよね。Vuetifyを入れて、ページ遷移まで確認できれば後はなんとかなりそうだな、と思っていらっしゃる方の参考になれば幸いです。
Nuxt3(SSR)でVuetifyを使えるようにする
Nuxt3 Vuetify Vuetify Nuxt3 Vuetify Vuetify This article is a tutorial on how to use Vuetify with Nuxt3. It covers the installation of Vuetify, setting up Vuetify as a plugin for Nuxt3, and preparing the page to be displayed. The article also includes instructions on how to check the operation of Vuetify.
by JanitorAug 10, 2023
もともとSPA(Vue)でウェブサイトを作成していたのですが、どうせならSSRまでやってみるかと思い、現在はこのウェブサイトはNuxt3で動作しています。SPAと比較するとSSRは敷居が高いよ、というような雰囲気の記事が多く、実際に自分の中で「型」のようなものが出来上がるまでの調査期間が2週間程度かかってしまいましたが、一度「型」のようなものが出来上がってしまえば、サクサクと進みました。私と同様にSPAで作成してみたけどSSRどうしようかなと思っている方や、さっさと基盤となるものを用意・製造開始・SPAからSSRに変更したいんだけど。。。という方の参考になれば幸いです。
もともとSPA(Vue)でウェブサイトを作成していたのですが、どうせならSSRまでやってみるかと思い、現在はこのウェブサイトはNuxt3で動作しています。SPAと比較するとSSRは敷居が高いよ、というような雰囲気の記事が多く、実際に自分の中で「型」のようなものが出来上がるまでの調査期間が2週間程度かかってしまいましたが、一度「型」のようなものが出来上がってしまえば、サクサクと進みました。私と同様にSPAで作成してみたけどSSRどうしようかなと思っている方や、さっさと基盤となるものを用意・製造開始・SPAからSSRに変更したいんだけど。。。という方の参考になれば幸いです。
Jump Links
1.AWSのCloud9でIDEを作成
2.インストール
3.表示するページの準備
4.動作確認
5.おわりに
1.AWSのCloud9でIDEを作成
1.AWSのCloud9でIDEを作成
AWSにアクセスしてcloud9で「環境を作成」を押してIDEを作成します。すでに作成されている方は不要です。「t3.small」だとメモリ不足、「m5.large」はちょっと高いな、ということで「t3.medium」を選択しています。
AWSにアクセスしてcloud9で「環境を作成」を押してIDEを作成します。すでに作成されている方は不要です。「t3.small」だとメモリ不足、「m5.large」はちょっと高いな、ということで「t3.medium」を選択しています。
2.インストール
2.インストール
cloud9のIDEを開き、下記コマンドを実行します。やっていることを箇条書きすると下記３点です。
・Nuxt3をインストール
・プロジェクトフォルダに移動して、Vuetifyを使えるようにするためのインストール
・VuetifyをpulginとしてNuxt3に使わせる設定
cloud9のIDEを開き、下記コマンドを実行します。やっていることを箇条書きすると下記３点です。
・Nuxt3をインストール
・プロジェクトフォルダに移動して、Vuetifyを使えるようにするためのインストール
・VuetifyをpulginとしてNuxt3に使わせる設定
コマンド
npx nuxi@latest init nuxt3Study
cd nuxt3Study
npm install -g yarn
yarn add vuetify@next sass
yarn add @mdi/font
yarn add vite-plugin-vuetify
mkdir plugins
touch plugins/vuetify.js
コマンド
npx nuxi@latest init nuxt3Study
cd nuxt3Study
npm install -g yarn
yarn add vuetify@next sass
yarn add @mdi/font
yarn add vite-plugin-vuetify
mkdir plugins
touch plugins/vuetify.js
plugins/vuetify.jsの修正
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
ssr: true,
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
plugins/vuetify.jsの修正
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
ssr: true,
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
tsconfig.jsonの修正
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"node"
],
"noImplicitAny": false
},
}
tsconfig.jsonの修正
{
// https://v3.nuxtjs.org/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"types": [
"node"
],
"noImplicitAny": false
},
}
nuxt.config.tsの修正
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
devtools: { enabled: false },
components: true,
css: [
'vuetify/lib/styles/main.sass',
'@mdi/font/css/materialdesignicons.min.css',
],
build: {
transpile: [ 'vuetify' ],
},
router: {
trailingSlash: false
},
modules: [
async ( options, nuxt ) => {
nuxt.hooks.hook("vite:extendConfig", ( config ) =>
config.plugins.push( vuetify() )
);
},
],
})
nuxt.config.tsの修正
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
devtools: { enabled: false },
components: true,
css: [
'vuetify/lib/styles/main.sass',
'@mdi/font/css/materialdesignicons.min.css',
],
build: {
transpile: [ 'vuetify' ],
},
router: {
trailingSlash: false
},
modules: [
async ( options, nuxt ) => {
nuxt.hooks.hook("vite:extendConfig", ( config ) =>
config.plugins.push( vuetify() )
);
},
],
})
参考にさせて頂いたウェブサイトのURL
https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html
参考にさせて頂いたウェブサイトのURL
https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html
3.表示するページの準備
3.表示するページの準備
layoutsフォルダを作成し、default.vueを作成し、app.vueを修正します。
layoutsフォルダを作成し、default.vueを作成し、app.vueを修正します。
default.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VApp>
<VMain class="default">
<NuxtPage />
</VMain>
</VApp>
</template>
default.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VApp>
<VMain class="default">
<NuxtPage />
</VMain>
</VApp>
</template>
app.vueの修正
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
app.vueの修正
<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
pagesフォルダを作成し、index.vue、pageA/index.vue、pageB/index.vueを作成してそれぞれ下記のようにしてページ遷移確認用のページを作成していきます。
pagesフォルダを作成し、index.vue、pageA/index.vue、pageB/index.vueを作成してそれぞれ下記のようにしてページ遷移確認用のページを作成していきます。
index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid>
<VRow no-gutters>
<VCol cols="6">
<NuxtLink to="/pageA">
pageA
</NuxtLink>
</VCol>
<VCol cols="6">
<NuxtLink to="/pageB">
pageB
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid>
<VRow no-gutters>
<VCol cols="6">
<NuxtLink to="/pageA">
pageA
</NuxtLink>
</VCol>
<VCol cols="6">
<NuxtLink to="/pageB">
pageB
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageA/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageA.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageA/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageA.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageB/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageB.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
pageB/index.vueの修正
<script setup>
import { ref, reactive, watch } from 'vue';
</script>
<template>
<VContainer fluid class="h-100">
<VRow no-gutters>
<VCol cols="6">
This is pageB.
</VCol>
<VCol cols="6">
<NuxtLink to="/">
home
</NuxtLink>
</VCol>
</VRow>
</VContainer>
</template>
4.動作確認
4.動作確認
package.jsonにstartを追加し、buildして動作確認します。図のような画面が表示され、リンクをクリックしてページが遷移すれば成功です。VContainer、VRowなどのVuetifyのAPIが動作することが確認できました。
package.jsonにstartを追加し、buildして動作確認します。図のような画面が表示され、リンクをクリックしてページが遷移すれば成功です。VContainer、VRowなどのVuetifyのAPIが動作することが確認できました。
package.jsonの修正
"start": "HOST=0.0.0.0 PORT=8080 node .output/server/index.mjs" // scriptsに追加
package.jsonの修正
"start": "HOST=0.0.0.0 PORT=8080 node .output/server/index.mjs" // scriptsに追加
コマンド
yarn build
yarn start
コマンド
yarn build
yarn start
5.おわりに
5.おわりに
CSSの経験を積み重ねてきた人の武器を、丸ごと使わせてもらえるようなイメージのVuetifyはとても便利ですよね。Vuetifyを入れて、ページ遷移まで確認できれば後はなんとかなりそうだな、と思っていらっしゃる方の参考になれば幸いです。
CSSの経験を積み重ねてきた人の武器を、丸ごと使わせてもらえるようなイメージのVuetifyはとても便利ですよね。Vuetifyを入れて、ページ遷移まで確認できれば後はなんとかなりそうだな、と思っていらっしゃる方の参考になれば幸いです。