Incognitus Posts - Answer Overflow

Incognitus

Explore posts from servers

•Created by Incognitus on 10/30/2024 in #❓・help

How to share configs in DDD Nuxt App?

I have flat structure

.
├── app/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   ├── nuxt.config.ts
│   ├── stores
│   ├── constants
│   └── services
├── auth/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   └── nuxt.config.ts.
├── nuxt.config.ts
├── package.json
└── .gitignore

.
├── app/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   ├── nuxt.config.ts
│   ├── stores
│   ├── constants
│   └── services
├── auth/
│   ├── .playground/
│   │   └── .nuxt.config.ts
│   └── nuxt.config.ts.
├── nuxt.config.ts
├── package.json
└── .gitignore

I decided that all my auto-import rools will be in root nuxt.config

import { useLayers } from 'nuxt-layers-utils'

const layers = useLayers(__dirname, {
  app: 'app',
  auth: 'auth',
})

export default defineNuxtConfig({
  extends: layers.extends(),
  alias: layers.alias('#'),
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  imports: {
    dirs: [
      '**/stores',
      '**/constants',
      '**/services',
      'packages',
    ],
  },

  modules: ['@nuxt/eslint'],
})

import { useLayers } from 'nuxt-layers-utils'

const layers = useLayers(__dirname, {
  app: 'app',
  auth: 'auth',
})

export default defineNuxtConfig({
  extends: layers.extends(),
  alias: layers.alias('#'),
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },

  imports: {
    dirs: [
      '**/stores',
      '**/constants',
      '**/services',
      'packages',
    ],
  },

  modules: ['@nuxt/eslint'],
})

When I try to pnpm dev in auth/.playground I get error, that myStore is not defined in auth default layout. I thought that root nuxt.config is shared between layers, but turns out its not. How do I have to manage configs, to be able to test them in .playground?

5 replies

KPCKevin Powell - Community

•Created by Incognitus on 6/23/2024 in #front-end

Is it possible to use container queries on container itself?

Hey guys, recently been trying to get back to container queries research, and found that styles don't apply on container itself. I think I saw Kevin do that in one of his videos, and now it doesn't work. Or maybe I'm trippin. Anyway example below didn't work. Google suggests using wrapper, but it doesn't go well when there is a list of such containers. I assume that I can use display: contents on wrapper, but overall wrapping doesn't seem like a good solution. Maybe someone figured out how to do this properly, or knows if its planned in specs. Any answer is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Example</title>
    <style>
        /* Define the container */
        .card {
            container: card / inline-size;
            width: 100%; /* This ensures the card takes up available space */
            /* Other default styles for .card */
            background-color: lightgrey;
            padding: 10px;
            border: 1px solid grey;
        }

        /* Container query for .card when its width is more than 300px */
        @container card (min-width: 300px) {
            .card {
                /* Styles for .card when its width is more than 300px */
                background-color: lightblue;
                padding: 20px;
                border: 2px solid blue;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>This is a card component.</p>
    </div>
</body>
</html>

6 replies

NNuxt

•Created by Incognitus on 5/8/2023 in #❓・help

How to dynamically set src for image ?

1 replies

KPCKevin Powell - Community

•Created by Incognitus on 4/25/2023 in #front-end

How to make <li> bullet just stay inside container, not move text ?

10 replies

Gaming

Programming