Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Usage with app in body #7

Open
jods4 opened this issue May 9, 2021 · 3 comments
Open

Usage with app in body #7

jods4 opened this issue May 9, 2021 · 3 comments

Comments

@jods4
Copy link

jods4 commented May 9, 2021

Our app is mounted directly into the document <body>.
Unfortunately, the <svg> spritesheet is already created at this point and gets wiped out by Vue, so icons don't work.

I can't change the app mounting point and put it into a child of <body>, do you have any advice how to make that setup work?

I was thinking maybe the runtime could be a Vue plugin that injects itself in the body after the app is mounted?
For backward compatibility, this mode of runtime initialization could be optional and only needed when mounting in body directly.
@meowtec
Copy link
Owner

meowtec commented May 10, 2021 •
edited
Loading

Maybe we could have a global variable called __VITE_SVG_SPRITE_TARGET_EL__ which the user could register to window.
If __VITE_SVG_SPRITE_TARGET_EL__ existed, <svg> will be inserted here.

Then you could:

// register before all codes, make sure that `vite-plugin-svg-sprite` can always visit it.
window.__VITE_SVG_SPRITE_TARGET_EL__ = document.createElement('div')

// in app mounted:
mounted() {
  this.$refs.svgRoot.appendChild(window.__VITE_SVG_SPRITE_TARGET_EL__)
}
template: `...<div ref="svgRoot"></div>...`,

@jods4
Copy link
Author

jods4 commented May 10, 2021

If we go in this direction, maybe just export getSvgRoot() from runtime?

That way, one could do:

import { getSvgRoot } from "vite-plugin-svg-sprite";

createApp(APP).mount(document.body);
document.body.append(getSvgRoot()); // Put back the SVG sprites inside body

@meowtec
Copy link
Owner

meowtec commented May 10, 2021

If we go in this direction, maybe just export getSvgRoot() from runtime?

That way, one could do:

import { getSvgRoot } from "vite-plugin-svg-sprite";

createApp(APP).mount(document.body);
document.body.append(getSvgRoot()); // Put back the SVG sprites inside body

You are right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jods4 @meowtec