search

nuxt-modules / device

Nuxt module for detecting device type.
MIT License
886 stars 49 forks source link

how to change a layout dynamically? #175

Open durbanitas opened 7 months ago

durbanitas commented 7 months ago

I need help using this line mentioned in the documentation on how to change a layout dynamically:

export default {
  layout: (ctx) => ctx.$device.isMobile ? 'mobile' : 'default'
}

Tried

index.vue

<script setup>
definePageMeta({
  layout: (ctx) => (ctx.$device.isMobile ? 'mobile' : 'default'),
});
</script>

<template>
  <main>
    ...
  </main>
</template>

Error

vite_ssr_import_6.default[props.name] is not a function

Invalid layout (ctx) => (ctx.$device.isMobile ? 'mobile' : 'default') selected. [Vue warn]: Invalid prop: type check failed for prop "name". Expected String | Boolean, got Function

Question

Where do I place this? My guess is initalizing as a plugin or to create a middleware...

Goal