Vuex this.$store not typed, after adding shim.

[herrKlein]

Hi, great plugin, thanks for the effort.

Current Behavior

I tried to type 'this.$store' with this tutorial Included the shim in both the nx project folder and apps/vue project folder. this.$store is still <any>

Expected Behavior

a typed this.$store in vue methods I succesfully managed to type useStore.

Steps to Reproduce

Create NX repo with @nx-plus/vue Add vue store Add store and typed shim ( add vuex.d.ts ) to the project folder like this: typing store prop in vue Restart Vite this.$state is still any

Environment

Plugin name and version: "@nx-plus/vue": "^11.0.1",

Node : 12.22.1 OS : darwin x64 yarn : 1.22.5

nx : Not Found @nrwl/angular : Not Found @nrwl/cli : 11.2.10 @nrwl/cypress : 11.2.10 @nrwl/devkit : 11.2.10 @nrwl/eslint-plugin-nx : 11.2.10 @nrwl/express : Not Found @nrwl/jest : 11.2.10 @nrwl/linter : 11.2.10 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : 11.2.10 @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 11.2.10 @nrwl/web : 11.2.10 @nrwl/workspace : 11.2.10 typescript : 4.0.3

[ZachJW34]

I was able to get the typings to work by configuring Vetur to work in a monorepo and adding "strict": true to the compilerOptions of an app's tsconfig.app.json. For example, given an app called my-app:

// vetur.config.js
module.exports = {
  settings: {
    "vetur.useWorkspaceDependencies": true,
    "vetur.experimental.templateInterpolationService": true
  },
  projects: [
    {
      root: './apps/my-app',
      tsconfig: './tsconfig.app.json',
    }
  ]
}

// apps/my-app/tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "types": ["webpack-env", "node"],
    "strict": true,
  },
  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
  "include": ["**/*.ts", "**/*.tsx", "**/*.vue"]
}

I was able to get the proper typings after adding the vuex.d.ts

I had to reload VS Code when making these changes (restart TS Server + Vetur) for them to take affect.

[herrKlein]

Glad there is some kind of solution. Wonder why strict mode is necessary, the whole project ( including a bunch of webcomponents imported in vue ) is now strict checked and it's not nice. Too many errors to fix :(

Do you know if this lies within vue integrated in a monorepo, or is it just vue who wants everything scrictly typed?

[BuckyMaler]

@ZachJW34 with #188 merged it seems adding or updating vetur.config.js with the app and library schematics, and adding vuex.d.ts with the vuex schematic would be all that's needed to provide Vuex type support out of the box. Is that correct?

@herrKlein would you like to contribute these changes?

[herrKlein]

Hi @BuckyMaler Do I understand vetur.config.js is updated with the strict property default to true? What changes can I contribute further? Personally, strict mode is not working for me, it opposes also strict mode on everything I import in Vue ( like webcomponents ) and I am still wondering if Vue with typescript is usable without strict mode in NX. Maybe I am too inexperienced to understand your question :)

[ZachJW34]

@BuckyMaler Yes that would be all that is needed to provide type support for Vuex.