Ribbon Icons display incorrect size while using Vite and Typescript.

[Tim]

Icons don't seem to follow group orientation under vite. setting to orientation="" sort of fixes it but alignment seems slightly off.

Steps to recreate: New project using vue 3 and vite with typescript, eslint, and prettier. also installed vue-router and pini using "npm create vue@latest"

and inserting a ribbon from the demo pages into app.vue.

​  

Attachment: vueribbontest_e03e027f.zip

[Indrajith Srinivasan]

Hi Tim,

Good day to you.

On further validation, the issue reproduces only when the project is created using npm create vue@latest with ESLint, Prettier, Vue Router, and Pinia selected. In this setup, an additional Ribbon item gets rendered even though it is not defined in the ribbon templates.

We are currently validating this behavior further and will update you with more details on or before Friday (02/05/2025).

Regards,
Indrajith

[Tim]

Thank you, Indrajith!

[Vigneshwaran Govindharajan]

Hi Tim,

Sorry for the delay in getting back to you.

We have identified that the issue was caused using the vite-plugin-vue-devtools package in the vite.config.ts file. This plugin injects additional debug metadata and modifies the component rendering behavior, which interferes with Ribbon’s internal directive structure.

Since the Ribbon component relies on a strict DOM hierarchy and directive nesting for layout rendering, any such modifications can lead to unexpected behavior-such as additional items being rendered or incorrect alignment.

After removing the vite-plugin-vue-devtools plugin from the configuration, the issue was resolved.

Vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// import vueDevTools from 'vite-plugin-vue-devtools'

 

// https://vite.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    // vueDevTools(),

  ],

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    },

  },

})

Please get back to us if you need any further assistance.

Regards,
Vigneshwaran

[Tim]

Understood. Thank you very much, Vigneshwaran