Vue + Vite 8

<!-- Button.vue -->
<template>
  <button :class="classes" :style="{ color }">{{ label }}</button>
</template>

<script setup lang="ts">
import { computed } from "vue"
const props = defineProps<{ label: string; variant?: "primary" | "secondary" }>()
const classes = computed(() => `btn btn-${props.variant ?? "primary"}`)
const color = ref("blue")
</script>

<style scoped>
.btn {
  padding: 8px 16px;
}
</style>

// Compiled output of Button.vue
import { computed, ref } from "vue"

// The script setup content is extracted as a setup() function
const __sfc__ = {
  __name: "Button",
  props: { label: String, variant: String },
  setup(props) {
    const classes = computed(() => `btn btn-${props.variant ?? "primary"}`)
    const color = ref("blue")
    return { classes, color }
  },
  render: /* render function compiled from template */
}

// Scoped styles injection (hash ID prevents conflicts)
__sfc__.__scopeId = "data-v-HASH"

export default __sfc__

<template>
  <div v-if="show">{{ message }}</div>
</template>

import {
  createElementVNode as _createElementVNode,
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
  createCommentVNode as _createCommentVNode,
} from "vue"

function render({ show, message }) {
  return show ? (_openBlock(), _createElementBlock("div", null, message)) : _createCommentVNode("v-if", true)
}

<script setup>
import { ref } from "vue"
const count = ref(0)
defineProps<{ title: string }>()
</script>

import { ref } from "vue"

export default {
  props: { title: String },
  setup(props) {
    const count = ref(0)
    return { count }
  },
}

<style scoped>
.button {
  color: red;
}
</style>

/* Each SFC gets a unique hash */
.button[data-v-1a2b3c4d] {
  color: red;
}

<script setup>
const color = ref("blue")
</script>

<style scoped>
.button {
  color: v-bind(color);  /* dynamically binds the color variable */
}

// Injects the v-bind CSS variable onto the component's root element
import { useCssVars } from "vue"

useCssVars((ctx) => ({
  "1a2b3c4d-color": ctx.color,
}))

.button[data-v-1a2b3c4d] {
  color: var(--1a2b3c4d-color); /* references the CSS variable */
}

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "node:path"

export default defineConfig({
  plugins: [
    vue({
      // Handle custom blocks (e.g., <i18n> blocks)
      customElement: false, // Do not compile SFCs as Custom Elements
    }),
  ],
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
})

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "jsx": "preserve",
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

<!-- Write the "compiled output" (JavaScript version) for the following SFC: -->

<template>
  <div class="card" :class="{ 'card--dark': dark }">
    <h2 v-if="title">{{ title }}</h2>
    <slot />
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title?: string
    dark?: boolean
  }>(),
  { dark: false }
)
</script>

<style scoped>
.card {
  padding: 16px;
}
.card--dark {
  background: #1a1a1a;
  color: white;
}
</style>

<!-- Write the equivalent Options API version, then sketch the rough structure of the compiled output -->