Skip to content

raygence13/ovvl-website

Repository files navigation

Vue 2 + TypeScript + Vite + Vuetify

logo

This is a starter project that uses Vuetify as the UI framework. Please use scss version 1.32.12 due to a problem on the Vuetify side.

Vuetify3 version is here.

Description

This template is for using Vue2 with TypeScript in Vite. Includes vue-router and Vuex, vue-property-decorator.

In addition, ESLint, Stylelint, and Prettier are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)

Composition API

It also supports the Composition API. 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.

Of course, Vuetify instance can also be accessed with useVuetify(). In the Composition API, you can handle it in the same way as this.$vuetify by entering const vuetify = useVuetify(); in the setup() function.

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

If you are thinking of supporting Vue2 and Vue3 both, consider introducing vue-demi.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Commands

Command Description
dev Start devserver.
clean Clear devserver cache.
build Build for production
build:clean Clear production build files.
lint Run ESLint and prettier.
lint:style Run Stylelint.
lint:markup Check vue markup.
preview Run the program generated by the production build.

Migrate from VueCli

It also works when migrating from VueCLI.

However, when importing a stylesheet with @import, it cannot be specified from the library directory. Must be specified from ~node_modules/.

Also, if you used the .env file in the previous environment, you need to change the calling part from process.env to import.meta.env after installing vite-plugin-env-compatible separately.

Troubleshooting

When adding or deleting files, an error may occur and even if the error is corrected, it may not be reflected in devserver. In that case, stop devserver and delete all the files in the node_modules/.vite directory. You can also run it with the clean command.

Footnotes

  1. https://github.com/vuejs/composition-api/issues/136

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published