Alejandro Mery Posts - Answer Overflow

Alejandro Mery

Explore posts from servers

NNuxt CDCloudflare Developers

Posts Comments

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

CDCloudflare Developers

•Created by Alejandro Mery on 5/22/2024 in #workers-help

can't deploy example

until now I've used the github integration, but I wanted to start a mono-repo and created a dummy project using pnpm create cloudflare. unfortunatelly wrangler login gets stuck on consent and when trying an API token it just says I don't have the correct permissions (very unuseful) wrangler login gets stuck on the consent page, maybe related to a this CORS error?

Access to manifest at 'https://consent.dash.cloudflare.com/manifest.json' from origin 'https://dash.cloudflare.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
consent.dash.cloudflare.com/manifest.json:1 
       Failed to load resource: net::ERR_FAILED
consent-form:1 Access to internal resource at 'https://consent.dash.cloudflare.com/manifest.json' from origin 'https://dash.cloudflare.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to manifest at 'https://consent.dash.cloudflare.com/manifest.json' from origin 'https://dash.cloudflare.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
consent.dash.cloudflare.com/manifest.json:1 
       Failed to load resource: net::ERR_FAILED
consent-form:1 Access to internal resource at 'https://consent.dash.cloudflare.com/manifest.json' from origin 'https://dash.cloudflare.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

until it times out while the [allow] button waits... then I tried using a an API Token with * Cloudflare Pages:Edit * Workers KV Storage:Edit * User Details:Read but I get slapped with an unhelpful Authentication error [code: 10000] Please ensure it has the correct permissions for this operation. what could I be missing?

5 replies

Gaming

Programming