slidev
slidev copied to clipboard
Can't use vue script in markdown anymore
Describe the bug Can't define script tags in markdown
To Reproduce Steps to reproduce the behavior:
- Start server for
demo/starter - Go on slide 7
- Animation is broken because the browser complains about the
finalvariable not being defined, but the variable is define in a vue script tag inside the markdown
Desktop (please complete the following information):
- OS: Ubuntu 20.04
- Browser: Chrome 101
- Slidev version: 0.31.2
It seems to be related with the vite-plugin-md plugin.
I checked the code of the 7th slide.
Before being processed by the plugin:
# Animations
Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
```html
<div
v-motion
:initial="{ x: -80 }"
:enter="{ x: 0 }">
Slidev
</div>
```
<div class="w-60 relative mt-6">
<div class="relative w-40 h-40">
<img
v-motion
:initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-square.png"
/>
<img
v-motion
:initial="{ y: 500, x: -100, scale: 2 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-circle.png"
/>
<img
v-motion
:initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-triangle.png"
/>
</div>
<div
class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
v-motion
:initial="{ x: -80, opacity: 0}"
:enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
Slidev
</div>
</div>
<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
<script setup lang="ts">
const final = {
x: 0,
y: 0,
rotate: 0,
scale: 1,
transition: {
type: 'spring',
damping: 10,
stiffness: 20,
mass: 2
}
}
</script>
<div
v-motion
:initial="{ x:35, y: 40, opacity: 0}"
:enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
[Learn More](https://sli.dev/guide/animations.html#motion)
</div>
The <script setup lang="ts"> is still there
And after the being processed:
<template>
<div><h1>Animations</h1>
<p>Animations are powered by <a href="https://motion.vueuse.org/" target="_blank" rel="noopener">@vueuse/motion</a>.</p>
<pre class="shiki-container"><pre class="slidev-code shiki shiki-dark" style="background-color: #121212"><code v-pre><span class="line"><span style="color: #858585"><</span><span style="color: #429988">div</span></span>
<span class="line"><span style="color: #DBD7CA"> </span><span style="color: #E0A569">v-motion</span></span>
<span class="line"><span style="color: #DBD7CA"> </span><span style="color: #E0A569">:initial</span><span style="color: #858585">=</span><span style="color: #C98A7D">"{ x: -80 }"</span></span>
<span class="line"><span style="color: #DBD7CA"> </span><span style="color: #E0A569">:enter</span><span style="color: #858585">=</span><span style="color: #C98A7D">"{ x: 0 }"</span><span style="color: #858585">></span></span>
<span class="line"><span style="color: #DBD7CA"> Slidev</span></span>
<span class="line"><span style="color: #858585"></</span><span style="color: #429988">div</span><span style="color: #858585">></span></span></code></pre><pre class="slidev-code shiki shiki-light" style="background-color: #ffffff"><code v-pre><span class="line"><span style="color: #8E8F8B"><</span><span style="color: #2F8A89">div</span></span>
<span class="line"><span style="color: #393A34"> </span><span style="color: #B58451">v-motion</span></span>
<span class="line"><span style="color: #393A34"> </span><span style="color: #B58451">:initial</span><span style="color: #8E8F8B">=</span><span style="color: #B56959">"{ x: -80 }"</span></span>
<span class="line"><span style="color: #393A34"> </span><span style="color: #B58451">:enter</span><span style="color: #8E8F8B">=</span><span style="color: #B56959">"{ x: 0 }"</span><span style="color: #8E8F8B">></span></span>
<span class="line"><span style="color: #393A34"> Slidev</span></span>
<span class="line"><span style="color: #8E8F8B"></</span><span style="color: #2F8A89">div</span><span style="color: #8E8F8B">></span></span></code></pre></pre>
<div class="w-60 relative mt-6">
<div class="relative w-40 h-40">
<img
v-motion
:initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-square.png"
/>
<img
v-motion
:initial="{ y: 500, x: -100, scale: 2 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-circle.png"
/>
<img
v-motion
:initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
:enter="final"
class="absolute top-0 left-0 right-0 bottom-0"
src="https://sli.dev/logo-triangle.png"
/>
</div>
<div
class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
v-motion
:initial="{ x: -80, opacity: 0}"
:enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
Slidev
</div>
</div>
<!-- vue script setup scripts can be directly used in markdown, and will only affects current page -->
<div
v-motion
:initial="{ x:35, y: 40, opacity: 0}"
:enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">
<p><a href="https://sli.dev/guide/animations.html#motion" target="_blank" rel="noopener">Learn More</a></p>
</div></div>
</template>
<script setup>
const excerpt = undefined
</script>
<script>
</script>
The <script setup lang="ts"> is not there anymore, and other <script> tags are added