Back

Error installing Pink design into an existing Nuxt project

  • 1
  • General
  • Web
olanetsoft
26 Mar, 2023, 18:57

Thank you. updated.

TL;DR
Error installing Pink design into existing Nuxt project. Importing <@870607367597850624>.io/pink on the script tag fails. Solution: Modify nuxt.config file to include `css: ['@appwrite.io/pink']`.
Elad Shechter
27 Mar, 2023, 00:11

forward: @Torsten Dittmann @Arman @Thomas G. Lopes

sSr
27 Mar, 2023, 05:56

strange to see "babel-loader" this might be related to webpack might be easier to use vite ?

Thomas G. Lopes
27 Mar, 2023, 07:43

@Elad Shechter this error seems to be because we're using end instead of flex-end somewhere?

Thomas G. Lopes
27 Mar, 2023, 07:43

In any case, this is just a warning and should not break anything, but would be good to correct it

Elad Shechter
27 Mar, 2023, 07:45

Ok, this is because the new value of CSS of alignment property, which we prefer to use with the new values.

olanetsoft
27 Mar, 2023, 10:05

Its a warning but it breaks Nuxt app.

olanetsoft
28 Mar, 2023, 14:15

@Core any update here please?

Thomas G. Lopes
28 Mar, 2023, 14:16

Hi @olanetsoft . I'll try to reproduce the issue with a Nuxt app, and get back to you, hopefully with a fix πŸ˜„

olanetsoft
28 Mar, 2023, 14:16

Thank you. Looking forward to that.

Torsten Dittmann
28 Mar, 2023, 14:17

I do have a workaround that would work right away

Torsten Dittmann
28 Mar, 2023, 14:17

you could include it for now from CDN until we fixed it πŸ™‚ https://pink.appwrite.io/getting-started#cdn

Thomas G. Lopes
28 Mar, 2023, 14:29

One question, does it break with Nuxt 2 or 3?

olanetsoft
28 Mar, 2023, 14:32

let me check this out. Will revert soon

olanetsoft
28 Mar, 2023, 14:32

"nuxt": "^2.15.8",

Thomas G. Lopes
28 Mar, 2023, 14:34

Thank you, will try it out.

olanetsoft
28 Mar, 2023, 14:38

Works fine with this. Thanks for the help.

Looking forward to the other fix πŸ˜€

Thomas G. Lopes
28 Mar, 2023, 14:51

@olanetsoft Are you using PostCSS? If so, could you share the config? I failed to reproduce the issue, but I see that your error is coming from autoprefixer, which I assume is the postcss plugin.

Thomas G. Lopes
28 Mar, 2023, 14:51

Or maybe you're using tailwind?

Thomas G. Lopes
28 Mar, 2023, 14:59

Disregard that, I managed to run into the issue πŸ‘

olanetsoft
28 Mar, 2023, 14:59

oh okay

Thomas G. Lopes
28 Mar, 2023, 15:17

Found the issue! Importing @Appwrite.io/pink on the script tag fails, but you can import global css on Nuxt 2 by modifying your nuxt.config file:

TypeScript
export default {
  // ....

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['@appwrite.io/pink'],

  // ...
}
Thomas G. Lopes
28 Mar, 2023, 15:18

You can see more details at https://go.nuxtjs.dev/config-css

olanetsoft
29 Mar, 2023, 11:04

Oh cool,

Thats another option. I used the CDN option suggested by @Torsten Dittmann earlier and it works fine.

Thank you for the update @Thomas G. Lopes

Thomas G. Lopes
29 Mar, 2023, 11:05

You're welcome, feel free to reach out anytime πŸ˜„

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more