How can i modify the AppLayout.vue and AppNavBar.vue?

[hermesalvesbr]

Hi there,

Thanks for this project!

I have installed the project with this command: npx nuxi@latest init -t themes/content-wind my-website

How can i customize the layout? This is possible?

[condorheroblog]

Hi @hermesalvesbr, I have some experience. I hope it can help you!

Create a new AppLayout.vue file under the components folder of your project, this file can overwrite the default layout. Currently, there are also AppLayout vue, AppLoadingBar. vue, AppNavbar. Vue and ColorModeSwitch.vue files that can be created.

See details here https://github.com/Atinux/content-wind/tree/main/components.

This is my example of imitating Anthony Fu's blog (https://antfu.me/posts) https://github.com/condorheroblog/condorhero.me/blob/main/components/AppLayout.vue

[hermesalvesbr]

Thanks for response. I tried with AppLayout.vue, but show me this error:

[plugin:vite:css] [postcss] /home/nuxt/site-assinador/components/AppLayout.vue?vue&type=style&index=0&lang.postcss:3:5: Thedark:class does not exist. Ifdark:is a custom class, make sure it is defined within a@layerdirective.

[condorheroblog]

Thanks for response. I tried with AppLayout.vue, but show me this error:

[plugin:vite:css] [postcss] /home/nuxt/site-assinador/components/AppLayout.vue?vue&type=style&index=0&lang.postcss:3:5: Thedark:class does not exist. Ifdark:is a custom class, make sure it is defined within a@layerdirective.

You asked the right person. I also had this problem when I edited AppLayout.vue almost finished my homework, My solution is to copy the entire content of the content-wind's AppLayout.vue file to replace the local AppLayout.vue, then restart the development environment, the error is gone, and then restore the local file content.

I hope my advice can help you🥳

[atinux]

@condorheroblog thank you for helping! Also I feel honoured that you use Content Wind for your personal website 😊

Regarding the error when overwriting a component, I will see with the framework team but indeed restarting the server fixes it!

[hermesalvesbr]

Didn´t work for me. I have tried:

1. rm -Rf .nuxt
2. rm -Rf node_modules
3. reboot my computer

:(

[atinux]

Could you share your repo @hermesalvesbr ?

[hermesalvesbr]

This branch:

https://github.com/hermesalvesbr/content-wind/tree/wind

Thank you for this attention.

[atinux]

It works for me @hermesalvesbr

[hermesalvesbr]

Perfect, i will try in another computer node-version.