How to convert Roma PrimeVue to TS

[premdasvm]

Hi,

I just purchased the Roma PrimeVue template, and i see that it's using JS, what are your recommend procedures to use TS in the project instead of JS ?

[sezisfurkan]

Hi,
Transitioning from JS to TS in Roma: Create tsconfig.json ,Rename JS files to .ts ensure TS compatibility for dependencies configure tsconfig.json. and finally convert code to TypeScript.

[cagataycivici]

Thank you for your purchase, Roma is a vite project in JS, the TS version has the following format;

https://vite.new/vanilla-ts

So you need;

1. Add config files to root folder.

• tsconfig.json
• tsconfig.node.json

I'd suggest turning linting part to false during migration of layout code to TS. Once it runs with TS, you can turn it on for further improvements.

at root folder.

2. The package.json file should include typescript and vue-tsc as a dev dependency;

"devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.8",
    "vue-tsc": "^1.8.8"
  }

3. Rename main.js to main.ts

4. In App.vue, add lang="ts" to the script element.

5. Layout folder is the only necessary part, other files like views are demos. .vue files under src/layout should have lang="ts" as well. Now you can add types e.g.;

        changeTopbarColor(event, topbarColor, logo) {
            this.$emit('topbar-color-change', topbarColor, logo);
            event.preventDefault();
        },

        changeTopbarColor(event:MouseEvent, topbarColor: string, logo: string) {
            this.$emit('topbar-color-change', topbarColor, logo);
            event.preventDefault();
        },

If you have any questions during migration, please get in touch with us.

[premdasvm]

Hi,
Thanks for the quick reply.
The link you provided shows not found.

[cagataycivici]

Corrected -> https://vite.new/vanilla-ts