Alejandro Mery
Alejandro Mery
Explore posts from servers
NNuxtCDCloudflare Developers
PostsComments
NNuxt
Created by Alejandro Mery on 2/6/2025 in #❓・help
`class` property type
when moving class from attrs to props, to bind them to different elements, how should it be typed?
4 replies
NNuxt
Created by Alejandro Mery on 2/2/2025 in #❓・help
path to dependency
I'm working on a nuxt plugin to integrate a vue+tailwind components library. for tailwindcss to work the files from that library need to be referenced in the generated config file. I've had some success using: 
export const resolvePackage = (pkg: string): string => new URL(import.meta.resolve(pkg)).pathname;
export const resolvePackage = (pkg: string): string => new URL(import.meta.resolve(pkg)).pathname;
it it often explodes with an error I fail to understand: 
ERROR  Error while importing module @poupe/nuxt: SyntaxError: Cannot use 'import.meta' outside a module                      
ERROR  Error while importing module @poupe/nuxt: SyntaxError: Cannot use 'import.meta' outside a module
https://github.com/poupe-ui/poupe/blob/main/packages/poupe-nuxt/src/tailwind.ts#L13 any suggestion on how to get that path?
9 replies
NNuxt
Created by Alejandro Mery on 12/29/2024 in #❓・help
reactive css variables
hi, I'm trying to load css variables using a reactive url in useHead() styles but, how can I make this client-only?
5 replies
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