Wm Comments - Answer Overflow

Additionally '@nuxtjs/tailwindcss' ought to be removed from package.json, and nuxt.config.ts, because nuxt/ui is already importing it. From my understanding the tailwindcss module can cause conflicts with the nuxt/ui package. /package.json

 "dependencies": {
    "@nuxt/ui": "^2.21.0",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },

 "dependencies": {
    "@nuxt/ui": "^2.21.0",
    "nuxt": "^3.15.3",
    "vue": "latest",
    "vue-router": "latest"
  },

/nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/ui'],

})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/ui'],

})

9 replies

NNuxt

•Created by parakoopa on 2/3/2025 in #❓・help

Toast config Nuxt UI

9 replies

NNuxt

•Created by Thorge on 2/1/2025 in #❓・help

Static builds with nuxt content result in empty pages

Admittedly it had taken me a few hours to understand the new Nuxt/Content system. Good to hear it worked out; happy coding

14 replies

NNuxt

•Created by Thorge on 2/1/2025 in #❓・help

Static builds with nuxt content result in empty pages

That code works and generates pages using npm run generate

14 replies

NNuxt

•Created by Thorge on 2/1/2025 in #❓・help

Static builds with nuxt content result in empty pages

/nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/content', '@nuxt/ui']
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/content', '@nuxt/ui']
})

/content.config.ts

import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
    collections: {
        content: defineCollection({
            type: 'page',
            source: '**/*.md'
        })
    }
})

import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
    collections: {
        content: defineCollection({
            type: 'page',
            source: '**/*.md'
        })
    }
})

/pages/index.vue

<script setup lang="ts">

</script>

<template>
  <main class="container mx-auto relative mt-10 grid grid-cols-4">
    <div class="col-span-1">
      <h1 class="text-5xl p-1.5">T3</h1>
    <SideNavigation/>
    </div>
    <div class="col-span-3">
      <MdContent/>
    </div>
  </main>
</template>

<script setup lang="ts">

</script>

<template>
  <main class="container mx-auto relative mt-10 grid grid-cols-4">
    <div class="col-span-1">
      <h1 class="text-5xl p-1.5">T3</h1>
    <SideNavigation/>
    </div>
    <div class="col-span-3">
      <MdContent/>
    </div>
  </main>
</template>

/components/sideNavigation.vue

<script setup lang="ts">
import type {ContentNavigationItem} from "@nuxt/content";

const route = useRoute()
const {data: main_navigation} = await useAsyncData(route.path, async () => {
  return queryCollectionNavigation('content')
})

</script>

<template>
  <div class="sticky top-10">
    <nav v-for="main_nav of main_navigation" :key="main_nav.path" class="col-span-1">

<script setup lang="ts">
import type {ContentNavigationItem} from "@nuxt/content";

const route = useRoute()
const {data: main_navigation} = await useAsyncData(route.path, async () => {
  return queryCollectionNavigation('content')
})

</script>

<template>
  <div class="sticky top-10">
    <nav v-for="main_nav of main_navigation" :key="main_nav.path" class="col-span-1">

/components/mdContent.vue

<script setup lang="ts">
const route = useRoute()

const {data: page} = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})


if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}

</script>

<template>
    <ContentRenderer
        v-if="page"
        :value="page"
        class="prose dark:prose-invert"
    />
</template>

<script setup lang="ts">
const route = useRoute()

const {data: page} = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})


if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}

</script>

<template>
    <ContentRenderer
        v-if="page"
        :value="page"
        class="prose dark:prose-invert"
    />
</template>

14 replies

Gaming

Programming