@xenterprises/nuxt-x-marketing 0.0.20 → 0.0.21

package/.playground/nuxt.config.ts

@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  extends: [["..", { install: true }]],
+  extends: ['..'],
 
   compatibilityDate: "2024-10-23",
 });

package/.playground/pages/index.vue

@@ -1,5 +1,4 @@
 <template>
-	<div></div>
+  <div></div>
 </template>
-<script setup>
-</script>
+<script setup></script>

package/app/app.vue

@@ -0,0 +1,33 @@
+<template>
+  <main class="min-h-screen flex flex-col justify-between">
+    <XHeaderNav />
+    <section class="flex-grow">
+      <NuxtLoadingIndicator />
+      <UApp>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </UApp>
+    </section>
+    <section>
+      <XFooter />
+      <XFooterXLegal />
+    </section>
+  </main>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import markerSDK from "@marker.io/browser";
+
+const appConfig = useAppConfig();
+useSeoMeta({
+  titleTemplate: `%s`,
+});
+if (appConfig && appConfig?.xMarketing?.config?.markerProjectId) {
+  onMounted(() => {
+    const widget = markerSDK.loadWidget({
+      project: appConfig?.xMarketing?.config?.markerProjectId,
+    });
+  });
+}
+</script>

package/app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

package/app/pages/blog/index.vue

@@ -1,34 +1,34 @@
 <template>
-	<div class="pb-8 max-w-screen-2xl px-8 mx-auto">
-		<UPageHero :title="blog?.title" :description="blog?.description" />
+  <div class="pb-8 max-w-screen-2xl px-8 mx-auto">
+    <UPageHero :title="blog?.title" :description="blog?.description" />
 
-		<UPageBody>
-			<UBlogList>
-				<UBlogPost
-					v-for="(post, index) in blogPosts?.results"
-					:key="index"
-					:to="`/blog/${post?.data?.slug}`"
-					:title="post?.name"
-					:description="post?.data?.summary"
-					:image="{ src: post?.data?.thumbnail, alt: post?.name }"
-					:orientation="index === 0 ? 'horizontal' : 'vertical'"
-					:class="[index === 0 && 'col-span-full']"
-					:ui="{
-						description: 'line-clamp-3',
-					}"
-				>
-					<div class="mt-4">
-						<UButton
-							:to="`/blog/${post?.data?.slug}`"
-							variant="outline"
-							color="gray"
-							label="Read More"
-						/>
-					</div>
-				</UBlogPost>
-			</UBlogList>
-		</UPageBody>
-	</div>
+    <UPageBody>
+      <UBlogPosts>
+        <UBlogPost
+          v-for="(post, index) in blogPosts?.results"
+          :key="index"
+          :to="`/blog/${post?.data?.slug}`"
+          :title="post?.name"
+          :description="post?.data?.summary"
+          :image="{ src: post?.data?.thumbnail, alt: post?.name }"
+          :orientation="index === 0 ? 'horizontal' : 'vertical'"
+          :class="[index === 0 && 'col-span-full']"
+          :ui="{
+            description: 'line-clamp-3',
+          }"
+        >
+          <div class="mt-4">
+            <UButton
+              :to="`/blog/${post?.data?.slug}`"
+              variant="outline"
+              color="gray"
+              label="Read More"
+            />
+          </div>
+        </UBlogPost>
+      </UBlogPosts>
+    </UPageBody>
+  </div>
 </template>
 
 <script setup>
@@ -38,19 +38,19 @@ const route = useRoute();
 const config = useRuntimeConfig();
 
 const blogPosts = await $fetch("https://cdn.builder.io/api/v3/content/posts", {
-	query: {
-		apiKey: config?.public?.BUILDERIO_KEY,
-		offset: 0,
-		fields: "id,name,data.slug,data.summary,data.thumbnail",
-	},
+  query: {
+    apiKey: config?.public?.BUILDERIO_KEY,
+    offset: 0,
+    fields: "id,name,data.slug,data.summary,data.thumbnail",
+  },
 });
 const title = blog?.meta?.title;
 const description = blog?.meta?.description;
 useSeoMeta({
-	title,
-	ogTitle: title,
-	description,
-	ogDescription: description,
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
 });
 
 // useHead({

package/nuxt.config.ts

@@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
   ssr: true,
@@ -8,9 +11,12 @@ export default defineNuxtConfig({
       BUILDERIO_KEY: "",
     },
   },
-  extends: ["@nuxt/ui-pro"],
   modules: ["@nuxt/ui", "@nuxtjs/seo", "@nuxt/image"],
+  css: [resolve(__dirname, 'app/assets/css/main.css')],
   ui: {
     icons: ["heroicons", "simple-icons"],
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xenterprises/nuxt-x-marketing",
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -18,10 +18,11 @@
   "dependencies": {
     "@marker.io/browser": "^0.19.0",
     "@nuxt/image": "^2.0.0",
-    "@nuxt/ui": "^2.18.7",
-    "@nuxt/ui-pro": "^1.4.4",
+    "@nuxt/ui": "^4.0.0",
     "@nuxtjs/seo": "^3.2.2",
+    "@tailwindcss/vite": "^4.1.17",
     "simple-icons": "^13.15.0",
+    "tailwindcss": "^4.1.17",
     "zod": "^3.23.8"
   }
 }

package/app.vue

@@ -1,33 +0,0 @@
-<template>
-	<main class="min-h-screen flex flex-col justify-between">
-		<XHeaderNav />
-		<section class="flex-grow">
-			<NuxtLoadingIndicator />
-			<NuxtLayout>
-				<NuxtPage />
-			</NuxtLayout>
-			<UNotifications />
-			<UModals />
-		</section>
-		<section>
-			<XFooter />
-			<XFooterXLegal />
-		</section>
-	</main>
-</template>
-<script setup>
-import { ref, onMounted } from "vue";
-import markerSDK from "@marker.io/browser";
-
-const appConfig = useAppConfig();
-useSeoMeta({
-	titleTemplate: `%s`,
-});
-if (appConfig && appConfig?.xMarketing?.config?.markerProjectId) {
-	onMounted(() => {
-		const widget = markerSDK.loadWidget({
-			project: appConfig?.xMarketing?.config?.markerProjectId,
-		});
-	});
-}
-</script>