Vue v2 to v3 (#62)

- Vue v2 to v3
    - Options API to Composition API
- Bootstrap to Vuetify
- Vue CLI to Vite
- JS to TypeScript
- Use DevContainer
- Language Japanase to English

.browserslistrc

@@ -1,2 +1,4 @@
 > 1%
 last 2 versions
+not dead
+not ie 11

.devcontainer/.env

@@ -0,0 +1,2 @@
+UID=1000
+GID=1000

.devcontainer/compose.yml

@@ -0,0 +1,15 @@
+services:
+  workspace:
+    image: mcr.microsoft.com/vscode/devcontainers/javascript-node:0-18-bullseye
+    init: true
+    command: /bin/sh -c "chown -R $UID:$GID /home/node/workspace/node_modules; while sleep 1000; do :; done"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    volumes:
+      - ..:/home/node/workspace:cached
+      - ~/.ssh:/home/node/.ssh
+      - node-modules:/home/node/workspace/node_modules
+    working_dir: /home/node/workspace
+
+volumes:
+  node-modules:

.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+// https://aka.ms/devcontainer.json
+{
+	"name": "sample-ui-vue",
+	"dockerComposeFile": [
+		"./compose.yml"
+	],
+	"service": "workspace",
+	"shutdownAction": "stopCompose",
+	"customizations": {
+		"vscode": {
+			"settings": {
+				"editor.defaultFormatter": "esbenp.prettier-vscode",
+				"editor.formatOnSave": true,
+				"editor.formatOnPaste": true,
+				"editor.formatOnType": true,
+				"editor.codeActionsOnSave": {
+					"source.fixAll.eslint": true
+				}
+			},
+			"extensions": [
+				"mhutchie.git-graph",
+				"mikestead.dotenv",
+				"EditorConfig.EditorConfig",
+				"dbaeumer.vscode-eslint",
+				"esbenp.prettier-vscode",
+				"Vue.volar",
+				"sdras.vue-vscode-snippets",
+				"dariofuzinato.vue-peek"
+			]
+		}
+	},
+	"workspaceFolder": "/home/node/workspace",
+	"postCreateCommand": "npm install",
+	"forwardPorts": [
+		3000
+	],
+	"remoteUser": "node"
+}

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.env

@@ -1,10 +1,13 @@
+# environment for devcontainer
+COMPOSE_PROJECT_NAME=sample-ui-vue
+
 # environment for productuion
 
 ## API base path to Application Server
-VUE_APP_API_ROOT=/api
+VITE_APP_API_ROOT=/api
 
 ## Application Log Level
-VUE_APP_LOG_LEVEL=INFO
+VITE_APP_LOG_LEVEL=INFO
 
 ## Application Session Strage Session Key
-VUE_APP_SESSION_KEY=vue-sample
+VITE_APP_SESSION_KEY=sample-ui-vue

.env.development

@@ -1,3 +1,7 @@
 # environment for development
-VUE_APP_API_ROOT=http://localhost:8080/api
-VUE_APP_LOG_LEVEL=DEBUG
+
+## API base path to Application Server
+VITE_APP_API_ROOT=http://localhost:8080/api
+
+## Application Log Level
+VITE_APP_LOG_LEVEL=DEBUG

.eslintrc.js

@@ -1,15 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended"],
-  parserOptions: {
-    parser: "babel-eslint"
+    node: true,
   },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-unused-vars": ["error", { vars: "all", args: "none" }]
-  }
-};
+    'vue/multi-word-component-names': 'off',
+  },
+}

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+
 # local env files
 .env.local
 .env.*.local
@@ -10,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -19,4 +21,3 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
-.history

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2019 jkazama
+Copyright (c) 2016-2023 jkazama
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -1,90 +1,37 @@
-sample-ui-vue
----
+## sample-ui-vue
 
-### はじめに
+## Preface
 
-[BootStrap](http://getbootstrap.com/) / [Vue.js](http://jp.vuejs.org/) を元にしたプロジェクト Web リソース ( HTML / CSS / JS ) です。 SPA ( Single Page Application ) モデルを前提としています。  
+Project web resource ( HTML / CSS / JS ) based on [Vuetify](https://vuetifyjs.com) / [Vue.js](https://vuejs.org). It assumes the SPA ( Single Page Application ) model.
 
-※ライブラリではなく上記ライブラリを用いた単純な実装サンプルです。
+This is a simple implementation sample using the above libraries, not the library.
 
-サンプル確認用の API サーバとして以下のいずれかを期待します。
-- [sample-boot-hibernate](https://github.com/jkazama/sample-boot-hibernate)
-- [sample-boot-micro](https://github.com/jkazama/sample-boot-micro)
-- [sample-boot-scala](https://github.com/jkazama/sample-boot-scala)
-- [sample-aspnet-api](https://github.com/jkazama/sample-aspnet-api)
-- [sample-php7-laravel](https://github.com/jkazama/sample-php7-laravel)
+We expect one of the following as an API server for sample confirmation.
 
----
-従来型のマルチページ実装については [sample-ui-vue-pages](https://github.com/jkazama/sample-ui-vue-pages) 、 Flux 実装については [sample-ui-vue-flux](https://github.com/jkazama/sample-ui-vue-flux) を参照してください。
+- [sample-boot-jpa](https://github.com/jkazama/sample-boot-jpa)
 
-#### ビルド / テスト稼働環境構築
+#### Getting Started
 
-ビルドは [Node.js](http://nodejs.jp/) + [Vue CLI](https://cli.vuejs.org/) + [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) で行います。以下の手順でインストールしてください。
+Frontend Start (VSCode DevContainer)
+It is necessary to do the following step.
 
-1. Node.js の[公式サイト](http://nodejs.jp/)からインストーラをダウンロードしてインストール。
-1. 「 `npm install -g yarn` 」を実行して Yarn をインストール。
-    - Mac ユーザは 「 `sudo npm install -g yarn` 」 で。
-1. コンソールで本ディレクトリ直下へ移動後、「 `yarn` 」を実行して `package.json` 内のライブラリをインストール
+- Check Instablled Docker.
+- Check Instablled VSCode with DevContainer Extension.
+- API Server Started.
 
-### 動作確認
+Do the preparations for this sample in the next step.
 
-動作確認は以下の手順で行ってください。
+- You move to the cloned `sample-ui-vue` directory.
+- Run command `code .`
+- Choose Open Container
 
-1. clone した [sample-boot-hibernate](https://github.com/jkazama/sample-boot-hibernate) を起動する。
-    - 起動方法は該当サイトの解説を参照
-    - application.yml の `extension.security.auth.enabled` を true にして起動すればログイン機能の確認も可能
-1. コンソールで本ディレクトリ直下へ移動し、 「 `yarn serve` 」 を実行
-    - 確認用のブラウザが自動的に起動する。うまく起動しなかったときは 「 http://localhost:3000 」 へアクセス
+Do the dev server start in the next step.
 
-### 開発の流れ
-
-基本的に .js ( ES201x ) または .vue ファイルを Web リソース ( .html / .css / .js ) へ Vue CLI でリアルタイム変換させながら開発をしていきます。  
-動作確認は Vue CLI が提供する Web サーバを立ち上げた後、ブラウザ上で行います。  
-
-#### 各種テンプレートファイルの解説
-
-- [Sass (SCSS)](http://sass-lang.com/)
-    - CSS 表記を拡張するツール。変数や mixin 、ネスト表記などが利用可能。
-- [ES201x with Babel](https://babeljs.io/)
-    - ES201x 用の Polyfill 。 ES5 でも ES201x 風に記述が可能。
-
-#### 各種テンプレートファイルの変更監視 / Web サーバ起動
-
-+ コンソールで本ディレクトリ直下へ移動し、 「 `yarn serve` 」 を実行
-
-### 配布用ビルドの流れ
-
-配布リソース生成の流れは開発時と同様ですが、監視の必要が無いことと、配布リソースに対する minify や revison の付与などを行う必要があるため、別タスクで実行します。
-
-#### 配布用 Web リソースのビルド / リリース
-
-+ コンソールで本ディレクトリ直下へ移動し、 「 `yarn build` 」 を実行
-+ `dist` ディレクトリ直下に出力されたファイルをリリース先のディレクトリへコピー
-
-### ポリシー
-
-- JS / CSS の外部ライブラリは npm で管理する
-- JS は Vue CLI を利用して生成する
-- Vue.js の実装アプローチは [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0) を参考に
-
-#### ディレクトリ構成
-
-ディレクトリ構成については Vue CLI のディレクトリポリシーに準拠します。
-
-### 依存ライブラリ
-
-| ライブラリ                    | バージョン   | 用途/追加理由 |
-| ------------------------- | -------- | ------------- |
-| `vue`                     | 2.x    | アプリケーションの MVVM 機能を提供 |
-| `vue-router`              | 3.x    | Vue.js の SPA ルーティングサポート |
-| `jquery`                  | 3.3.x    | DOM 操作サポート (for Bootstrap) |
-| `lodash`                  | 4.17.x   | 汎用ユーティリティライブラリ |
-| `bootstrap`               | 4.x    | CSS フレームワーク |
-| `fontawesome-free`        | 5.x    | フォントアイコンライブラリ |
-
-> 詳細は package.json を確認してください
+- Open VSCode Terminal.
+- `npm run dev`
+- Open Browser with `http://localhost:3000`
 
 ### License
 
-本サンプルのライセンスはコード含めて全て *MIT License* です。  
-プロジェクト立ち上げ時のベース実装サンプルとして気軽にご利用ください。
+The license of this sample includes a code and is all _MIT License_.
+Use it as a base implementation at the time of the project start using Spring Boot.

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sample-ui-vue</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>