Posted at

DockerでNuxt.js on TypeScriptを始めてみよう


背景

もっと簡単にDockerでNuxt.jsを始めてみる(続Dockerでローカル環境を汚さずにNuxt.jsを始めてみる)の環境をもっと良くして行くために、TypeScriptを導入する。


環境

Docker for Mac(macOS Mojave)

Nuxt.js 2.8


前提条件

もっと簡単にDockerでNuxt.jsを始めてみる(続Dockerでローカル環境を汚さずにNuxt.jsを始めてみる)の通りにNuxt.jsを作成済み。


作業

docker-compose run node npm install -D @nuxt/typescript

docker-compose run node npm install ts-node
docker-compose run node npm install -D vue-property-decorator
touch tsconfig.json

を実行。

components/HelloWorld.vueを作成

<template>

<div>
{{ message }}
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
message: string = 'Hello world !'
}
</script>

pages/index.vueを編集

<template>

<div class="container">
<HelloWorld/>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '~/components/HelloWorld.vue'
@Component({
components: {
HelloWorld
}
})
export default class Home extends Vue {}
</script>

<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}

.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}

.links {
padding-top: 15px;
}
</style>

nuxt.config.jsnuxt.config.tsに変更して、下記の通り編集

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
// タイプするか `Ctrl + Space` を押すとオートコンプリートできます
mode: 'universal',
/*
** Headers of the page
*/

head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/

loading: { color: '#fff' },
/*
** Global CSS
*/

css: [
],
/*
** Plugins to load before mounting the App
*/

plugins: [
],
/*
** Nuxt.js dev-modules
*/

devModules: [
],
/*
** Nuxt.js modules
*/

modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/

axios: {
},
/*
** Build configuration
*/

build: {
/*
** You can extend webpack config here
*/

extend(config, ctx) {
}
}
}

export default config

docker-compose run --service-ports node npm run dev

実行し、localhost:3001へアクセスし

Image from Gyazo

が出れば成功。


参考

Nuxt.js TypeScript サポート

Nuxt2.6でTypescriptを使ってみる