slidev-theme-narduin/layouts/title-image.vue

<script setup lang="ts">
import { imageSrc } from '../utils/imageHelper'

const props = defineProps({
  image: {
    type: String,
    required: true
  }
})

const image = imageSrc(props.image)
</script>

<template>
  <div class="slidev-layout h-full title">
    <div class="grid h-full gap-4">
      <div class="place-self-center">
        <slot />
      </div>
      <div class="image"></div>
    </div>
  </div>
</template>

<style scoped>
.grid {
  grid-template-columns: 3fr 2fr;
}
.image {
  block-size: 100%;
  background-image: v-bind(image);
  background-size: cover;
  background-position: center;
}
</style>