search

facing-dev / vue-facing-decorator

Vue typescript class component decorators
MIT License
355 stars 31 forks source link

Include example with definePageMeta for layout #129

Open J-Sek opened 2 weeks ago

J-Sek commented 2 weeks ago

I just spent much more that I wish anybody should have, just to realize that there are too many ways to write code with definePageMeta, but only single one works with vue-facing-decorator.

// <script lang="ts">
@Component({})
class PdfPageExample extends Vue {
  @Setup(() => definePageMeta({ layout: 'print-pdf' })) private _layout!: never;
  // ...
  1. It cannot go to a separate <script>
  2. It cannot be just a plain call to definePageMeta above component declaration
  3. The field name has to start with underline (private and never are not relevant)

Layouts are quite common feature in Vue and I wonder if I just missed something in Docs or is it in fact missing.

Edit... well, it worked for a while, but restarting Dev server get's stuck again. The error is the source of my frustration as it is hardly pointing to anything specific.

 ERROR  [unhandledRejection] Unexpected character '@' (5:0)

  at pp$4.raise (node_modules/acorn/dist/acorn.mjs:3580:13)
  at pp.getTokenFromCode (node_modules/acorn/dist/acorn.mjs:5561:8)
  at ...
J-Sek commented 1 week ago

Ultimately I was forced to make a workaround and control nuxt-layout's name from app.vue depending on current route prefix. It seems definePageMeta is more magical (compiler macro) than common composables and cannot be used if a component uses decorators.