Layout and Pages

Hi guys,
I'm trying to have a pages/index.vue that route to components/HomePage.vue when connected and components/LandingPage.vue when non connected
And i also have layouts/default.vue for all pages when connected who contains a menu, and layouts/unauthenticated.vue for the LandingPage.vue only for now:

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

`

SO i have this code but the part :
definePageMeta({
layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})

Is causing me an error :
index.vue?macro=true:2 Uncaught
ReferenceError: isAuthenticated is not defined
at index.vue?macro=true:2:11

Anyone has an idea ?

Layout and Pages

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import HomePage from '@/components/HomePage.vue'
import LandingPage from '@/components/LandingPage.vue'

const userStore = useUserStore()
const { isAuthenticated } = storeToRefs(userStore)

definePageMeta({
  layout: isAuthenticated.value ? 'default' : 'unauthenticated'
})
</script>

<template>
  <div>
    <!-- Conditionally render the components based on authentication state -->
    <component :is="isAuthenticated ? HomePage : LandingPage" />
  </div>
</template>

Layout and Pages

Similar Threads

Layout and Pages

Similar Threads

Similar Threads

Similar Threads