Alejandro Mery
Alejandro Mery
Explore posts from servers
NNuxtCDCloudflare Developers
PostsComments
NNuxt
Created by Alejandro Mery on 9/21/2024 in #❓・help
ui-pro's UDashboardLayout vs UDashboardPage
hi, on @nuxt/ui-pro what's the intended difference between using UDashboardLayout or UDashboardPage as top level?
2 replies
NNuxt
Created by Alejandro Mery on 9/20/2024 in #❓・help
@nuxt/fonts + tailwindcss - use only local cache
I'm working on a nuxt3/static-embedded with tailwindcss and @nuxt/fonts and I want to use a google font but always served from /_fonts. 
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -25,6 +25,7 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxt/eslint',
+    '@nuxt/fonts',
     '@nuxtjs/tailwindcss',
   ],
 
@@ -40,6 +41,12 @@ export default defineNuxtConfig({
     },
   },
 
+  fonts: {
+    assets: {
+      prefix: '/_fonts',
+    },
+  },
+
   routeRules: {
     [apiPrefixPattern]: { proxy: apiBackendURLPattern },
   },
--- a/web/client/tailwind.config.ts
+++ b/web/client/tailwind.config.ts
@@ -1,3 +1,15 @@
 import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
-export default <Partial<Config>>{};
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Roboto',
+          ...defaultTheme.fontFamily.sans,
+        ],
+      },
+    },
+  },
+};
--- a/web/client/nuxt.config.ts
+++ b/web/client/nuxt.config.ts
@@ -25,6 +25,7 @@ export default defineNuxtConfig({
 
   modules: [
     '@nuxt/eslint',
+    '@nuxt/fonts',
     '@nuxtjs/tailwindcss',
   ],
 
@@ -40,6 +41,12 @@ export default defineNuxtConfig({
     },
   },
 
+  fonts: {
+    assets: {
+      prefix: '/_fonts',
+    },
+  },
+
   routeRules: {
     [apiPrefixPattern]: { proxy: apiBackendURLPattern },
   },
--- a/web/client/tailwind.config.ts
+++ b/web/client/tailwind.config.ts
@@ -1,3 +1,15 @@
 import type { Config } from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
-export default <Partial<Config>>{};
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          'Roboto',
+          ...defaultTheme.fontFamily.sans,
+        ],
+      },
+    },
+  },
+};
I do see css rules generated when running pnpm dev --host 
@font-face {
  font-family: 'Roboto';
  src: local("Roboto Regular Italic"), local("Roboto Italic"), url("/_fonts/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk-OvPrwBHD96.woff2") format(woff2);
  font-display: swap;
  // ...
}
@font-face {
  font-family: "Roboto Fallback: Arial";
  // ...
}
...
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Roboto, "Roboto Fallback: Arial", ui-sans-serif, /* ... */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
@font-face {
  font-family: 'Roboto';
  src: local("Roboto Regular Italic"), local("Roboto Italic"), url("/_fonts/KFOkCnqEu92Fr1Mu51xFIzIXKMnyrYk-OvPrwBHD96.woff2") format(woff2);
  font-display: swap;
  // ...
}
@font-face {
  font-family: "Roboto Fallback: Arial";
  // ...
}
...
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: Roboto, "Roboto Fallback: Arial", ui-sans-serif, /* ... */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
but the <div>Hello, World!</div> on my index.vue doesn't get the font applied and the woff file is never downloaded. Am I missing something?
2 replies