Vue: Complex template syntax replacement with computed property OR Accessing pageContext from script

[JGantts]

Hello!

I banged my head against the wall for the past hour or so; and out popped this:

<template>
  <p>     {{ 'https://imagedelivery.net/account_id/' + (post?.cf_image ?? 'ERROR') + '/w320' }} </p>
  <img :src="'https://imagedelivery.net/account_id/' + (post?.cf_image ?? 'ERROR') + '/w320'" />
</template>

which results in a paragraph with the desired URL followed by an image sourced from the same URL.

I would like to replace this with a computed property for syntactic sugar reasons. But more importantly, I'll need access to the post variable in the Vue setup script for near-future features.

Unfortunately I can't seem to figure out how to access the pageProps nor the pageContext from the Vue setup script.

Is such a thing possible? I do hope this is the correct place for this question.

Thank you! Your code is amazing!

[JGantts]

A thought: I could put the necessary data in a tag in the head, correct? And then access it from the script.

test

Oooh document.body properly return the body. Now to have fun with document.head.

I'd still like to access the pageContext/pageProps/post directly from the script. But now it's purely for syntactic sugar reasons.

edit: well, a tag in the body. Whatever

[JGantts]

It works!

I'd still like to know a way to directly access the pageProps from within the script; so I'll not mark this as answered yet.

However, I've gotten my data to the script's onMounted function via meta tags in the template. (allowed to be in the body as of html 5)

<template>
<meta itemprop="collage" :content="JSON.stringify(post.collage)">
<meta itemprop="images" :content="JSON.stringify(post.images)">

<h1>{{ post.title }}</h1>
</template>

<script lang="ts">
const pageProps = ['post']
export default { props: pageProps }
</script>

<script setup lang="ts">
import { onMounted } from 'vue'
onMounted(() => {
  let collage = document.body.querySelector("meta[itemprop='collage']").content
  let images = document.body.querySelector("meta[itemprop='images']").content

  console.log(collage)
  console.log(images)
})
</script>

[brillout]

I believe https://vite-plugin-ssr.com/pageContext-anywhere is what you're looking for.

[JGantts]

Thank you!