Vue 2.x event listeners bug & Vite + Vue 2.7 mode

[voknelis]

Hello, Thank you for you work on this repo. I've been using this plugin for a few week and I have ran into several small issues:

1. Vue 2.x event listeners bug

Expected Behavior

In the following example I expect clickHandler function to be called.

<template>
  <svg-icon name="logo" @click="clickHandler"  />
<template>

<script setup>
const clickHandler = () => console.log("Here")
</script>

Event binding should work with v-on="..." as well.

Current Behavior

Not clickHandler function is being called, nor v-on="..." is working.

Possible Solution

Adding .native modifier helps to archive the expected behaviour.

<svg-icon name="logo" @click.native="clickHandler"  />

However, .native cannot be used as permanent solution. I hoped we could add v-on="$listeners" directly to SvgIcon component template.

Steps to Reproduce

1. Open Vue 2 + Vite sandbox and click every icon component;
2. Open Vue 3 + Vite sandbox and click every icon component.

Context (Environment)

Vite + Vue 2.x

Detailed Description

The following issue is only reproducible with Vue 2.x and with Vue 3 the expected behaviour matches the current one, due to breaking changes.

Possible Implementation

Possible implementation would be to add v-on="$listeners" inside predefined Vue template in scr/core/snippets.ts:

export const template = `
  <svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    style="$component_style"
    v-on="$listeners"
  >
    <use :xlink:href="'#' + name" />
  </svg>
`

Please note, as we have different behaviour for 2.x and 3 we should make sure to apply v-on="$listeners" only for 2.x.

2. Vite + Vue 2.x error

Expected Behavior

When plugin is mounted, it should create svg sprite:

export default defineConfig({
  plugins: [
    UnpluginSvgComponent({ 
      vueVersion: 'auto'
    }), 
  ],
  ...
})

Current Behavior

Vite throws an error:

Error: Cannot find module 'vue-template-es2015-compiler'

Possible Solution

Set vueVersion manually to 3.

Steps to Reproduce

1. Open Vue 2 + Vite sandbox and click icon components;
2. Change vueVersion from 3 to 2 or 'auto' and restart sandbox.

Context (Environment)

Vite + Vue 2.x

Detailed Description

This behaviour is only reproducible with Vite and @vitejs/plugin-vue as the plugin does not have an internal dependency on 'vue-template-es2015-compiler' package. Note, using @vue/cli does not cause this error.

Possible Implementation

I have two suggestion to solve it:

• specify 'vue-template-es2015-compiler' package as required with Vue 2.x. Also we could manually check the package and throw an error inside src/core/generator.ts;
• detect Vite as a separated environment and always use '@vue/compiler-sfc' package to compile template.

-- Let me know, if you need any additional information.

[Jevon617]

I really appreciate your feedback, and I will fix these bugs as soon as possible.

[Jevon617]

@voknelis these bugs have been fixed in the latest version.

[voknelis]

@Jevon617 thanks you, that was really fast!