Set project type to module.

Removed eslint-plugin-json-schema-validator.
Made vue2-teleport available globally.
Update README.md.
Update dependencies.

.eslintrc.yml

@@ -6,14 +6,13 @@ extends:
   - eslint:recommended
   - google
   - plugin:@typescript-eslint/eslint-recommended
-  - plugin:json-schema-validator/recommended
   - plugin:import/recommended
   - plugin:import/typescript
   - plugin:jsdoc/recommended
-  - plugin:jsonc/prettier
   - plugin:vue/recommended
   - plugin:vuejs-accessibility/recommended
   - plugin:yaml/recommended
+  - plugin:jsonc/prettier
   - '@vue/eslint-config-prettier'
 plugins:
   - '@typescript-eslint'

README.md

@@ -8,7 +8,7 @@
 
 ## Description
 
-This template is for using Vue2 with TypeScript in Vite. Includes [vue-router](https://router.vuejs.org/) and [Vuex](https://vuex.vuejs.org/), [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
+This template is for using Vue2 with TypeScript in Vite. Includes [vue-router](https://router.vuejs.org/) and [Vuex](https://vuex.vuejs.org/).
 
 In addition, [ESLint](https://eslint.org/), [Stylelint](https://stylelint.io/), and [Prettier](https://prettier.io/) are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)
 
@@ -18,36 +18,17 @@ Also, when the development server is executed, it is checked in real time by [vi
 
 ### Composition API
 
-It also supports the [Composition API](https://composition-api.vuejs.org/). The installed VueRouter and Vuex are for Vue2, but you can use the functions (such as `useRouter()`, `useRoute()` and `useStore()`) for the composition API for Vue3.
+With the standard support for [Composition API](https://composition-api.vuejs.org/) in vue 2.7 from 0.5.0, the default format is composition api.
 
-It is possible to mix code written in composition-api and code written in vue-property-decolator, but it is not recommended to use them together in the same component. [^1]
+[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) will continue to be available, but mixed use is not recommended. [^1]
 
-As a limitation, Vue2's composition api cannot monitor the router with the watch function. In that case, monitor it by the following normal method:
-
-```js
-watch: {
-  $route: {
-    handler(to) {
-      //
-    },
-    immediate: true,
-  },
-},
-```
-
-If you are thinking of supporting Vue2 and Vue3 both, consider introducing [vue-demi](https://github.com/vueuse/vue-demi).
-
-### Vue i18n
-
-If you want to use [vue-i18n](https://kazupon.github.io/vue-i18n/), please install [vue-i18n-composable](https://github.com/intlify/vue-i18n-composable) and call the instance with `useI18n()`.
-
-In addition, the conventional method using `$t()` written in non composition-api can be used as it is.
+[^1]: <https://github.com/vuejs/composition-api/issues/136>
 
 ### Teleport
 
 Vue3 adds a mechanism called [`Teleport`](https://v3.vuejs.org/guide/teleport.html), which allows you to install vue components anywhere. This starter template is for vue2, but you can do the same with [vue2-teleport](https://www.npmjs.com/package/vue2-teleport).
 
-However, you will need to manually load the component with `import Teleport from 'vue2-teleport';` wherever you want to use it.
+⚠ Notice: For Vue3, `:is="'script'"` becomes `as="script"`.
 
 #### Teleport JSON-LD Example
 
@@ -66,12 +47,7 @@ If you want to include [JSON-LD](https://json-ld.org/), enter as follows.
 <script>
 import { defineComponent } from '@vue/composition-api';
 
-import Teleport from 'vue2-teleport';
-
 export default defineComponent({
-  components: {
-    Teleport,
-  },
   setup() {
     const jsonLd = ref(
       JSON.stringfy({
@@ -94,7 +70,11 @@ export default defineComponent({
 
 JSON-LD is literally a `script`, so it can't be embedded directly, so it's a roundabout thing like this, but simple things like `meta` tags are reflected by simply inserting a tag.
 
-Notice: For Vue3, `:as="'script'"` becomes `is="script"`.
+### Vue i18n
+
+If you want to use [vue-i18n](https://kazupon.github.io/vue-i18n/), please install [vue-i18n-composable](https://github.com/intlify/vue-i18n-composable) and call the instance with `useI18n()`.
+
+In addition, the conventional method using `$t()` written in non composition-api can be used as it is.
 
 ## Recommended IDE Setup
 
@@ -131,7 +111,7 @@ When adding or deleting files, an error may occur and even if the error is corre
 
 Due to [yarn issues](https://github.com/yarnpkg/berry/issues/4448), it may not work properly if the path contains non-ASCII characters (such as 日本語 or 한국어, 中文 etc.).
 
-[^1]: <https://github.com/vuejs/composition-api/issues/136>
+From 0.7.4, the default project type is module. If you find a plugin that doesn't work, remove `"type": "module"` from package.json. ([Laravel vite plugin](https://github.com/laravel/vite-plugin) etc.)
 
 ## See Also
 

package.json

@@ -2,9 +2,10 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vite-vue2-ts-starter",
   "description": "Vue2 TypeScript Startar project for Vite.",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "license": "MIT",
   "private": true,
+  "type": "module",
   "author": {
     "name": "Logue",
     "email": "logue@hotmail.co.jp",
@@ -39,7 +40,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@logue/vue2-helpers": "^1.2.4",
+    "@logue/vue2-helpers": "^2.0.1",
     "vue": "^2.7.8",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2",
@@ -48,24 +49,21 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@types/eslint": "^8.4.5",
-    "@types/node": "^18.6.2",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
     "@vitejs/plugin-vue2": "^1.1.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^1.3.0",
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.12.0",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-google": "^0.14.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.3.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsdoc": "^39.3.4",
-    "eslint-plugin-json-schema-validator": "^4.0.0",
+    "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-jsonc": "^2.3.1",
     "eslint-plugin-tsdoc": "^0.2.16",
     "eslint-plugin-vue": "^9.3.0",
@@ -74,7 +72,7 @@
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.4",
     "prettier": "^2.7.1",
@@ -86,12 +84,12 @@
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.7.4",
-    "vite": "^3.0.4",
+    "vite": "^3.0.5",
     "vite-plugin-checker": "^0.4.9",
-    "vitest": "^0.19.1",
+    "vitest": "^0.21.1",
     "vue-eslint-parser": "^9.0.3",
     "vue-template-compiler": "^2.7.8",
-    "vue-tsc": "^0.39.2"
+    "vue-tsc": "^0.39.5"
   },
   "husky": {
     "hooks": {

src/main.ts

@@ -3,15 +3,18 @@ import Vue from 'vue';
 
 import router from '@/router';
 import store from '@/store';
+import teleport from 'vue2-teleport';
 
 import '@/style.css';
 import App from '@/App.vue';
 
 Vue.config.productionTip = false;
+Vue.component('Teleport', teleport);
 
 const app = new Vue({
   router,
   store,
   render: h => h(App),
 });
+
 app.$mount('#app');

src/views/HomePage.vue

@@ -27,7 +27,6 @@ import { useRoute } from '@logue/vue2-helpers/vue-router';
 
 // Components
 import HelloWorld from '@/components/HelloWorld.vue';
-import Teleport from 'vue2-teleport';
 
 // Logo
 import vueLogo from '@/assets/vue.svg';
@@ -38,7 +37,6 @@ export default defineComponent({
   /** Components */
   components: {
     HelloWorld,
-    Teleport,
   },
   /** Props */
   props: {

tsconfig.json

@@ -5,7 +5,7 @@
     "newLine": "lf",
     "noImplicitAny": false,
     "paths": { "@/*": ["./src/*"] },
-    "types": ["vite/client", "vitest/globals", "node", "vue"]
+    "types": ["vite/client", "vitest/globals", "vue"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "exclude": ["node_modules", "dist"],