Mike
Mike
PostsComments
NNuxt
Created by Mike on 4/2/2025 in #❓・help
Auto Imports vs. components/AppHeader.vue (?)
@TheAlexLichter @HugoRCD thanks guys, proud to be a human 😆
16 replies
NNuxt
Created by Mike on 4/2/2025 in #❓・help
Auto Imports vs. components/AppHeader.vue (?)
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'

</script>

<template>
  <div>
    <AppHeader />
    <UMain>
      <slot />
    </UMain>
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'

</script>

<template>
  <div>
    <AppHeader />
    <UMain>
      <slot />
    </UMain>
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
  import * as locales from '@nuxt/ui-pro/locale'
  import { useI18n } from '#i18n'
  const { locale } = useI18n()
</script>

<template>
  <div>
    <UApp :locale="locales[locale]">
    <NuxtLoadingIndicator color="red" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
  </div>
</template>
<script setup lang="ts">
  import * as locales from '@nuxt/ui-pro/locale'
  import { useI18n } from '#i18n'
  const { locale } = useI18n()
</script>

<template>
  <div>
    <UApp :locale="locales[locale]">
    <NuxtLoadingIndicator color="red" />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
  </div>
</template>
16 replies
NNuxt
Created by Mike on 4/2/2025 in #❓・help
Auto Imports vs. components/AppHeader.vue (?)
Hi Hugo, yup let me pull that out. My app.vue is at the root (I have seen your template has /app/app/vue dir organisation) this btw did not work neither, got err that app.vue cant be found. 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "1.3.0",
    "@nuxt/fonts": "0.11.0",
    "@nuxt/icon": "1.11.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/ui": "3.0.2",
    "@nuxt/ui-pro": "^3.0.2",
    "@nuxtjs/i18n": "9.4.0",
    "eslint": "^9.0.0",
    "nuxt": "^3.16.2",
    "typescript": "^5.6.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "devDependencies": {
    "tailwindcss": "^4.1.0"
  }
}
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/eslint": "1.3.0",
    "@nuxt/fonts": "0.11.0",
    "@nuxt/icon": "1.11.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/ui": "3.0.2",
    "@nuxt/ui-pro": "^3.0.2",
    "@nuxtjs/i18n": "9.4.0",
    "eslint": "^9.0.0",
    "nuxt": "^3.16.2",
    "typescript": "^5.6.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
  "devDependencies": {
    "tailwindcss": "^4.1.0"
  }
}
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: [
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/ui-pro',
    '@nuxtjs/i18n'
  ],

  css: ['~/assets/css/main.css'],

  i18n: {
    bundle: {
      optimizeTranslationDirective: false // recommended by the Nuxt i18n team because it will be deprecated
    },
    defaultLocale: 'en',
    langDir: '../locales/',
    detectBrowserLanguage: false,
    lazy: true,
    locales: [
      {
        code: 'es',
        name: 'Español',
        file: 'es.json'
      },
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      }
    ]
  }
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: [
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/ui-pro',
    '@nuxtjs/i18n'
  ],

  css: ['~/assets/css/main.css'],

  i18n: {
    bundle: {
      optimizeTranslationDirective: false // recommended by the Nuxt i18n team because it will be deprecated
    },
    defaultLocale: 'en',
    langDir: '../locales/',
    detectBrowserLanguage: false,
    lazy: true,
    locales: [
      {
        code: 'es',
        name: 'Español',
        file: 'es.json'
      },
      {
        code: 'en',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'fr',
        name: 'Français',
        file: 'fr.json'
      }
    ]
  }
})
16 replies
NNuxt
Created by Mike on 4/2/2025 in #❓・help
Auto Imports vs. components/AppHeader.vue (?)
No description
16 replies
NNuxt
Created by Mike on 4/2/2025 in #❓・help
Auto Imports vs. components/AppHeader.vue (?)
The solution is manually import to my layouts/default.vue - but why auto imports are not working ? 
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'
</script>

<template>
  <div>
    <AppHeader />
      <slot />
    <AppFooter />
  </div>
</template>
<script setup lang="ts">
import AppHeader from '../componenets/AppHeader.vue'
import AppFooter from '../componenets/AppFooter.vue'
</script>

<template>
  <div>
    <AppHeader />
      <slot />
    <AppFooter />
  </div>
</template>
16 replies
NNuxt
Created by Mike on 3/28/2025 in #❓・help
content i18n
https://www.yogamos.es/
8 replies
NNuxt
Created by Mike on 3/28/2025 in #❓・help
content i18n
Thanks @HugoRCD , I managed to translate some pages but for nested content files i.e. docs or blog I will go for a speperate PR. Here is the repo https://github.com/michaelwybraniec/yogamos
8 replies