Rednib Posts - Answer Overflow

Rednib

•Created by Rednib on 12/3/2024 in #❓・help

Layers and overriding order

I have this folder structure:

...
layers/
├── base/
│   ├── nuxt.config.js
│   ├── layouts/
│   │   └── test.vue
│   │   └── default.vue
│   └── pages/
│       └── index.vue
│
├── dashboard/
│   ├── nuxt.config.js // extends: ["../base"]
│   ├── layouts/
│   │   ├── test.vue
│   │   └── default.vue
│   └── pages/
│       └── dashboard.vue

...
layers/
├── base/
│   ├── nuxt.config.js
│   ├── layouts/
│   │   └── test.vue
│   │   └── default.vue
│   └── pages/
│       └── index.vue
│
├── dashboard/
│   ├── nuxt.config.js // extends: ["../base"]
│   ├── layouts/
│   │   ├── test.vue
│   │   └── default.vue
│   └── pages/
│       └── dashboard.vue

But dashboard page always uses the layouts from base (default and test).. even when i define in pagemeta in the dashboard page:

  definePageMeta({
    layout: "test", // uses the test.vue layout from base.. expected is to override base's one and use dashboard's one
  });

  definePageMeta({
    layout: "test", // uses the test.vue layout from base.. expected is to override base's one and use dashboard's one
  });

What am i doing wrong?

6 replies

NNuxt

•Created by Rednib on 11/29/2024 in #❓・help

reactive issue: component <-> composable

Hi, i have a composable useThemeConfig which exports a reactive themeConfig:

export function useThemeConfig() {
  const themeConfig: ThemeConfig = reactive({
      themeLight: {
        "--primary-color": "#1a73e4",
        ...
      },
  ...
return {
    themeConfig,
    ...
  };

export function useThemeConfig() {
  const themeConfig: ThemeConfig = reactive({
      themeLight: {
        "--primary-color": "#1a73e4",
        ...
      },
  ...
return {
    themeConfig,
    ...
  };

then in a component i want to use it and change themeLight['--primary-color'] for example:

<script setup lang="ts">
  const { themeConfig } = useThemeConfig();
  ...
  themeConfig.themeLight["--primary-color"] = "#ff0000";
</script>
<template>
  <!-- Correctly shows #ff0000 -->
  <div>{{themeConfig.themeLight["--primary-color"]}}</div>
</template>

<script setup lang="ts">
  const { themeConfig } = useThemeConfig();
  ...
  themeConfig.themeLight["--primary-color"] = "#ff0000";
</script>
<template>
  <!-- Correctly shows #ff0000 -->
  <div>{{themeConfig.themeLight["--primary-color"]}}</div>
</template>

it updates correctly in the component, but the themeConfig in the composable did not change.. How can i achieve reactiveness between the composable and the component?

5 replies

Gaming

Programming