Updating Theme

[jh0274]

hi, i've cloned this theme and made updates (to the logo size) but i'm having issues deploying it to Netlify. these issues seem to be partly down to pnpm version/lockfile mismatches and also (perhaps) down to me trying to deploy the theme itself rather that via npx nuxi@latest init -t themes/alpine (which seems to deploy fine).

I'm looking to build a repo that gives me full control over the theme (as well as the ability to add content), that i can also deploy. Alternatively, i'm looking to build my own theme based on Alpine that i can incorporate into a repo via npx nuxi@latest init -t ... I I think i can also use:layering (via nuxt extends?) or perhaps use Nuxt studio to edit the theme directly?

I think i have a few options here, but i'd appreciate some help to choose the best one. Can someone point me to some relevant docs? I found this: https://nuxt.com/docs/getting-started/layers#layers

[Tahul]

Hello @jh0274 :)

Extending or overwriting themes is actually a feature Nuxt extends offers natively, there is no need for you to clone Alpine's repository except if you want to send a PR to the theme itself.

Here is how you can extend/overwrite the theme starting from the starters version:

• Look at nuxt-themes/alpine source directory
• Find a component/composable you want to overwrite from your project
• Create the same component/composable at your project level

Here is a StackBlitz reproduction that does exactly this to replace the AppHeader menu icon by a burger SVG: https://stackblitz.com/edit/nuxt-starter-mas2b8

Nuxt Extends works with precedence and your project level will always have priority over all others.

If you create something that shares the same name as any other layer, then you'll have precedence.

That is a great pattern if you want to gradually replace/extends Alpine, and is also easy to submit as a PR once you're done with making your own changes locally, if your changes are worth being shared with other Alpine users!

---

Stepping out of layers which are a Nuxt native feature, themes are more of a concept that is used for Nuxt Studio.

If you want to dig deeper into that concept, I advise you to take a look at this section of nuxt.studio docs: https://nuxt.studio/docs/themes/what-is-a-theme

---

Concerning you PNPM lockfile mismatch, I won't be able to help unless you send me a reproduction or an access to your repository, anyways I still advise you to look at the reproduction I sent because it seems like you are trying to build the layer of the theme instead of its starter.

---

Let me know if I can help any further, I would love to assist theme creation in any manner!

[ouroboricforms]

hi, i've cloned this theme and made updates (to the logo size) Do you mind sharing with me how you did this? Every attempt I have made to changing width and height doesn't work. I've been struggling with this portion.

[jh0274]

Hello @jh0274 :)

Extending or overwriting themes is actually a feature Nuxt extends offers natively, there is no need for you to clone Alpine's repository except if you want to send a PR to the theme itself.

Here is how you can extend/overwrite the theme starting from the starters version:

• Look at nuxt-themes/alpine source directory
• Find a component/composable you want to overwrite from your project
• Create the same component/composable at your project level

Here is a StackBlitz reproduction that does exactly this to replace the AppHeader menu icon by a burger SVG: https://stackblitz.com/edit/nuxt-starter-mas2b8

Nuxt Extends works with precedence and your project level will always have priority over all others.

If you create something that shares the same name as any other layer, then you'll have precedence.

That is a great pattern if you want to gradually replace/extends Alpine, and is also easy to submit as a PR once you're done with making your own changes locally, if your changes are worth being shared with other Alpine users!

Stepping out of layers which are a Nuxt native feature, themes are more of a concept that is used for Nuxt Studio.

If you want to dig deeper into that concept, I advise you to take a look at this section of nuxt.studio docs: https://nuxt.studio/docs/themes/what-is-a-theme

Concerning you PNPM lockfile mismatch, I won't be able to help unless you send me a reproduction or an access to your repository, anyways I still advise you to look at the reproduction I sent because it seems like you are trying to build the layer of the theme instead of its starter.

Let me know if I can help any further, I would love to assist theme creation in any manner!

Thanks for replying and sorry for delay. I have this working now.

[mora260]

@Tahul thanks for your response in this issue. Maybe a follow up question that I'll love to ask is: and what happens with the layouts? are they overwritable as well?

for example, the current version of the theme, when displaying and article, shows the title and the date, but not the author. I was looking into having a custom component to show an avatar and the name of the author along with their main social media handle.

BUT, if I use a component/content, it will be part of the prose, not the header right? How can I put it inside of the header? It seems to me like I would need to modify the layout, and to do that, I must clone the full repo, and not only rely only on the components that can be used inside the content itself.

EDIT: I made it work. I had to read a little bit more about how Nuxt handles layers and with a little bit of effort here and there I managed to use Alpine as a base, and then ovewrite the layout of articles with my custom file. Thanks a lot for your guidance on the matter.

[richard-edwards]

@mora260 can you share your setup please? I'm looking to do the same thing and your experience would be helpful.

Did you clone @nuxt-themes/alpine into a layers subfolder and then use that as the base in nuxt.config or did you create another layer that extended alpine and just override the layouts there?