Nuxt3 on Vuetify3

k_harry 2022/06/23に更新

Node.js準備

Node.jsはv14.16以降のバージョンである必要がある

nodebrew install v16.15.1
nodebrew use v16.15.1

プロジェクト作成

nuxt3,vuetify3共にmejorリリースされていない(2022.6.22現在)

nuxi init nuxt3-vuetify3
cd nuxt-vuetify3
yarn add vuetify@3.0.0-beta.4
yarn add sass
yarn install

vuetifyの設定

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  srcDir: 'src/',
  css: ['vuetify/lib/styles/main.sass'],
    build: {
        transpile: ['vuetify']
    },
    vite: {
        define: {
            'process.env.DEBUG': 'false',
        }
    }
})

plugins/vuetify.ts

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'

export default defineNuxtPlugin( nuxtApp => {
    const vuetify = createVuetify({
        components
    });

    nuxtApp.vueApp.use( vuetify );
})

k_harry 2022/06/29に更新

環境変数の切り替え

yarn add cross-env

package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "cross-env NODE_ENV=\"development\" nuxt dev",
    "generate": "nuxt generate",
    "test": "jest --runInBand --verbose"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.4"
  },
  "dependencies": {
    "cross-env": "^7.0.3",
    "sass": "^1.52.3",
    "vuetify": "3.0.0-beta.4"
  }
}

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
const environment = process.env.NODE_ENV || 'development'
const envSet = require(`./src/env/env.${environment}.js`)

export default defineNuxtConfig({
  srcDir: 'src/',
  runtimeConfig: {
    public: envSet
  },
  css: ['vuetify/lib/styles/main.sass'],
    build: {
        transpile: ['vuetify']
    },
    vite: {
        define: {
            'process.env.DEBUG': 'false',
        }
    }
})

yarn devで起動するとNODE_ENVがdevelopmentに強制される

env.development.js

module.exports = {
  baseUrl: 'https://sample.com/api'
}

k_harry 2022/06/29

VScodeの設定

Volarのインストール (Vue3の拡張機能)

Veturを「Disable(Workspace)」に設定する

k_harry 2022/06/30に更新

外部APIの呼び出し

どうやらNuxt3では、@nuxtjs/axiosは使えないらしい

useFetchやuseAsyncDataを使うことを推されているみたい

国情報を取得できるGraphQLを使って試してみる

graphql/country.ts

export async function getCountry() {
  const { data } = await useFetch('https://countries.trevorblades.com/graphql', {
    method: 'POST',
      body: {
          query: `
            query Query {
              country(code: "JP") {
                name
                native
                capital
                emoji
                currency
                languages {
                  code
                  name
                }
              }
            }
          `
      },
      headers: {
          'Content-Type': 'application/json',
      }
  })
  return data.value.data.country
}

app.vue

<template>
  <div class="d-flex align-center flex-column">
    <div class="mt-4 text-subtitle-2"></div>
    <v-card
      width="400"
    >
      <v-card-header>
        <v-card-header-text>
          <v-card-title>{{country.emoji}} {{country.name}}</v-card-title>
          <v-card-subtitle>{{country.native}}</v-card-subtitle>
        </v-card-header-text>
      </v-card-header>

      <v-card-text>
        首都：{{country.capital}}
        言語：
        <span v-for="lang in country.languages">{{ lang.name }} </span>
      </v-card-text>
    </v-card>
  </div>
</template>
<script setup lang="ts">
import { getCountry } from '~/graphql/country'
const country = await getCountry()
</script>

scriptのsetupだとスッキリ書けるみたい

app.vue プレビュー

使ったAPI

このスクラップは2022/06/22にクローズされました