Error installing Pink design into an existing Nuxt project

Thank you. updated.

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

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

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

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

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

Its a warning but it breaks Nuxt app.

@Core any update here please?

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

Thank you. Looking forward to that.

I do have a workaround that would work right away

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

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

let me check this out. Will revert soon

"nuxt": "^2.15.8",

Thank you, will try it out.

Works fine with this. Thanks for the help.

Looking forward to the other fix 😀

@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.

Or maybe you're using tailwind?

Disregard that, I managed to run into the issue 👍

oh okay

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:

export default {
  // ....

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

  // ...
}

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

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

You're welcome, feel free to reach out anytime 😄