piniajs / example-vue-2-vite

Vue 2 + Typescript + Vite

This template should help get you started developing with Vue 2 and Typescript in Vite.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

If Using Volar

Run Volar: Switch TS Plugin on/off from VSCode command palette.

If Using Vetur

1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
3. Open src/main.ts in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"

example-vue-2-vite's Issues

TypeError: options.getters is undefined (and more)

I found this repo when searching how to migrate from vuex using vue 2.
Any idea what this could be? (just did npm install and npm run dev)

[vite] connecting... client.ts:22:8
[vite] connected. client.ts:52:14
[Vue warn]: Error in data(): "TypeError: options.getters is undefined"

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
TypeError: options.getters is undefined
    createSetupStore pinia.esm-bundler.js:1377
    createOptionsStore pinia.esm-bundler.js:1097
    useStore pinia.esm-bundler.js:1576
    setup App.vue:39
    mergedSetupFn vue-composition-api.esm.js:2089
    initSetup vue-composition-api.esm.js:1862
    activateCurrentInstance vue-composition-api.esm.js:1782
    initSetup vue-composition-api.esm.js:1860
    wrappedData vue-composition-api.esm.js:1843
    VueJS 16
    <anonymous> main.ts:15
vue.runtime.esm.js:1897:12
[Vue warn]: Property or method "state" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
[Vue warn]: Property or method "fetchRandomJoke" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
[Vue warn]: Property or method "buttonText" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
[Vue warn]: Property or method "jokes" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
[Vue warn]: Error in render: "TypeError: _vm.jokes is undefined"

found in

---> <App> at src/App.vue
       <Root> vue.runtime.esm.js:619:14
TypeError: _vm.jokes is undefined
    render App.vue:1
    render vue-composition-api.esm.js:1827
    activateCurrentInstance vue-composition-api.esm.js:1782
    render vue-composition-api.esm.js:1826
    VueJS 16
    <anonymous> main.ts:15
vue.runtime.esm.js:1897:12
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html vue.runtime.esm.js:8485:8

Inconsistent dependencies prevent installation

When I clone the current repository and call npm install, I get the following messages:

➜  example-vue-2-vite git:(main) npm i                     
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"^2.7.0-beta.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.14 || ^3.2.0" from [email protected]
npm ERR! node_modules/pinia
npm ERR!   pinia@"^2.0.14" from the root project