facing-dev/vue-facing-decorator

Include example with definePageMeta for layout

Closed this issue · 3 comments

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 ...

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.

@J-Sek is not masic is nuxt/nuxt#29790

@J-Sek need to tweak nuxt to use ts plugin for acron
nuxt/nuxt#29790 (comment)

and that library to not make undefined waht is returned by definePageMeta (not all composables return value) reactive, for vue-class-component for example

// vue-class-esm-bundler.js

plainData[key] = setupState ? proxyRefs(setupState) : ref(null); // or something else or not add that to plainData at all!?