以下をすべて実行しComponentsを揃えたものは以下のリポジトリからclone可能
https://gitlab.com/algoage/sonpo/ocr_web/-/commit/596cdcafeb0ed8a6b453d424998e2eb424914dfe
version: '3.6'
services:
front:
build: ./front
volumes:
- ./:/shared
working_dir: /shared/front
ports:
- 3001:3001
environment:
- HOST=0.0.0.0
stdin_open: true # A: 最初はいるけどあとで消す
tty: true # A: 最初はいるけどあとで消す
command: yarn run dev # B
# command: /bin/sh -c "yarn run build:prod && yarn run start:prod" # Production
$ docker-compose build
$ docker-compose run front bash
/shared/front# yarn create nuxt-app front
/shared/front# yarn add install --dev pug pug-loader pug-plain-loader stylus stylus-loader
FROM node:11.14.0
WORKDIR /front
RUN apt-get update && \
apt-get install -y && \
npm install -g npm && \
# npm install -g yarn && \
npm install -g vue-cli && \
npm install -g @vue/cli-init
RUN yarn install
$ docker-compose up
export default {
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
// 以下を追加しないとVuetifyのiconが使用できない
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
},
devModules: ['@nuxtjs/vuetify'],
vuetify: {
theme: {
dark: false,
themes: {
light: {
primary: '#FFFFFF',
success: '#43A047', // green darken-1
}
}
}
},
...
その都度buildや、yarn installを忘れずに
Typescriptを使う場合には以下を参考に
https://qiita.com/miiiii/items/7d79f4f02303e8e486e3#create-nuxt-app-v2150
ページがレンダリングされる前に実行してくれるもの
mountedのあとでVuexにStoreの値を反映してくれる
storageをwindow.sessionStorageとしているので、ページのセッションはブラウザを開いている限り有効となる。これでページのリロードを実行されても持続する。