portfolio/pages/scores/[filename].vue

<template>
    <div class="flex min-h-full items-center justify-center text-center">
        <embed v-if="isPdf" :src="filePath" class="w-[85%] h-[88vh]"/>
        <NuxtImg v-else-if="isImage" :src="filePath" class="w-[85%]"/>
    </div>
</template>

<script setup>
const route = useRoute()

const filePath = computed(() => {
    const filename = route.params.filename
    return '/scores/' + filename
})

const isPdf = computed(() => {
    return route.params.filename?.endsWith('.pdf')
})

const isImage = computed(() => {
    const fn = route.params.filename || ''
    return fn.endsWith('.jpg') || fn.endsWith('.jpeg') || fn.endsWith('.png')
})

useHead({
    titleTemplate: 'Michael Winter - Scores - ' + route.params.filename
})
</script>