Wsrtjtyk

I'm using Vue to create an SPA (single-page app) and would like to render some semi-static pages. "Semi-static" meaning I'd like specific parts of the page to be rendered as their eventual HTML markup, while other parts of the page should remain dynamic just like the original Vue SPA.

A very basic example of one of my Vue templates:

<template>

  <div>{{ topHeadline }}</div>

  <div>

    <widget

     v-for="(w, index) in getWidgetList" 

     v-bind:key="w.id" 

     v-bind:name="w.widgetName"

     v-bind:obj="w"></widget>

  <div>

</template>



<script>

import { stateholder } from '../state/index.js'



export default {

  data () { 

    return { 

      headlineText: stateholder.state.headline ,

      versionNum: stateholder.state.versionNumber

    } 

  } , 

  methods: {

    topHeadline: function() {

      return `{$headlineText} v.{$versionNum}`

    } , 

    getWidgetList: async function() {

      axios.get(...).then((response) => {

        return response.data

      });

    } 

  }

}

</script>

In this case, I'd like Puppeteer to render the topHeadline as text in a simple DIV tag, while leaving the getWidgetList un-evaluated, so the end-user would still perform the axios request and then render a list of components dynamically.

Is this possible? How do I instruct puppeteer to evaluate some scripts but leave others alone?