vue next cli guidance

[mika76]

I just wanted to open this up more for guidance on trying the vue next cli if someone can help me.

Steps

doing the following:

~ vue create vue3

# select only typescript, router (no history mode) and linting + prettier (no class type)

~ cd vue3
~ vue add vue-next
~ npm run serve

That gives issues with router:

"vue3/node_modules/vue-router/dist/vue-router"' has no exported member 'RouteConfig'.
  > 1 | import { RouteConfig, createRouter, createWebHashHistory } from "vue-router";"

and shims:

vue3/src/shims-tsx.d.ts(8,40):
8:40 Cannot use namespace 'Vue' as a type.
     6 |         interface Element extends VNode { }
     7 |         // tslint:disable no-empty-interface
  >  8 |         interface ElementClass extends Vue { }
       |                                        ^

Questions

• Does this currently support typescript?
• If so what changed need to be made to get it up an running?

[mika76]

Maybe I should link @posva here as well?

[mika76]

If I try only babel, router and linting I still get an issue running:

 WARNING  Compiled with 2 warnings                                                                                        10:47:46

 warning  in ./node_modules/vue-router/dist/vue-router.esm.js

"export 'markNonReactive' was not found in 'vue'

 warning  in ./node_modules/vue-router/dist/vue-router.esm.js

"export 'markNonReactive' was not found in 'vue'

[mika76]

Ok so @posva updated router to alpha.6 and that has sorted the markNonReactive issue - and after removing the RouteConfig stuff from router.ts (and of course updating HelloWorld.vue to use vue 3's defineComponent the typescript seems to work.

replace the shims with the following, taken from https://github.com/vuejs/vue-cli-plugin-vue-next/issues/7#issuecomment-612589878

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  var component: ComponentOptions
  export default component
}

[tdowdle-aicradle]

Having the same issue tying out Vue 3.

Created a new project via the vue cli with everything selected:

Babel TypeScript Progressive Web App (PWA) Support Router Vuex CSS Pre-processors Linter / Formatter Unit Testing E2E Testing

cd project vue add vue-next

when I run the server I get the following errors out of the box:

ERROR in src/router/index.ts(1,10): 1:10 Module '"../../../../../..node_modules/vue-router/dist/vue-router"' has no exported member 'RouteConfig'.

1 | import { RouteConfig, createRouter, createWebHistory } from "vue-router"; | ^ 2 | import Home from "../views/Home.vue"; 3 | 4 | const routes: Array = [

ERROR in src/shims-tsx.d.ts(8,36): 8:36 Cannot use namespace 'Vue' as a type. 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} | ^ 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | }

ERROR in src/shims-tsx.d.ts(10,7): 10:7 Duplicate string index signature. 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; | ^ 11 | } 12 | } 13 | }

ERROR in src/store/index.ts(3,21): 3:21 Property 'createStore' does not exist on type '{ Store: typeof Store; mapState: Mapper & MapperWithNamespace & MapperForState & MapperForStateWithNamespace; mapMutations: Mapper<...> & ... 2 more ... & MapperForMutationWithNamespace; mapGetters: Mapper<...> & MapperWithNamespace<...>; mapActions: Mapper<...> & ... 2 more ... & MapperForAction...'. 1 | import Vuex from "vuex"; 2 | 3 | export default Vuex.createStore({ | ^ 4 | state: {}, 5 | mutations: {}, 6 | actions: {},

ERROR in tests/unit/example.spec.ts(8,7): 8:7 Argument of type '{ propsData: { msg: string; }; }' is not assignable to parameter of type 'MountingOptions'. Object literal may only specify known properties, and 'propsData' does not exist in type 'MountingOptions'. 6 | const msg = "new message"; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg } | ^ 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | });

Please Advise. Thank you

[josh-hemphill]

In order to get it to build I had to disable both the unit test and remove RouteConfig replacing routes: Array<RouteConfig> with routes: any[] There's an issue for vue-router-next about RouteConfig, what's responsible for the shallowMount options issue?

[gavan1]

it would be very helpful if any one has an actual running Vue 3 (3.0.0-beta.14) as the vue-cli-plugin-vue-next plugin is really not working.

It would be helpful to point which Typescript version is supported. At this rate VUE 3 should not be considered a beta.

[mika76]

After modifying the components and the router stuff the cli template should pretty much work. Have you tried https://github.com/vitejs/vite ?

[gavan1]

@mika76 ありがとう！ vote looks interesting, opinionated tools tend to work better.

[josh-hemphill]

I got the unit testing and Vue Router working, it's just that the APIs have changed slightly. I opened #32 for changing the default router imports, and then I need to figure out what exactly changed with the test-utils API for the default jest test.

[Pavel-Son]

@tdowdle

1. Replace RouteRecord with RouteRecordRaw
2. I believe that you can get rid of this file src/shims-tsx.d.ts
3. You need to import like this import { createStore } from "vuex"

I don't have any ideas how to fix this propsData issue. Please help :D

[josh-hemphill]

@tdowdle @StanleeLOD I changed propsData to just props and it seemed to accept it. I don't remember if I actually ran the test or not, so not 100% sure, but the typing didn't complain.

[haoqunjiang]

Vue 3 support available in Vue CLI 4.5 (current under the next dist-tag)

https://github.com/vuejs/vue-cli/releases/tag/v4.5.0

[Constructionware]

frustrated with vue js after upgrading to vue 3 . This is very poor on the developers of vue js part. Broken changes and insufficient documentation.