I'm using vite-plugin-ssr + vue-router and I want to implement critical styling. My project has a pages folder which has the following structure:
pages/SomePage/index.vue
<template>
<div class="TestPage">
TestPage Content
</div>
</template>
<script>
export default {
name: "TestPage"
}
</script>
<style lang="css" src="./critical.css"/>
pages/SomePage/critical.css
.TestPage {
background: red;
}
I want the styles from the critical.css file to go into the <head/> tag as internal ~ <style> .SomePage {background: blue;} </style> for each route.
I tried to get inspired by the rollup-plugin-critical idea, but my knowledge is apparently not enough, because a positive result could not be achieved.
How can this be implemented?
