Statamic Nuxt Theme
A guide for migrating from @nobears/statamic-nuxt-theme to the new Nuxt Statamic module.
Migrate @nobears/statamic-nuxt-theme
Update you .npmrc
Make sure you have a
GIT_NOBEARS_TOKEN environment variable set in your global .zshrc file..zshrc
export GIT_NOBEARS_TOKEN="YOUR_GIT_NOBEARS_TOKEN_ACCESS_TOKEN"
Remove the old packages from your .npmrc file:
.npmrc
# Install from Group level because of https://gitlab.com/gitlab-org/gitlab/-/issues/221412# See https://docs.gitlab.com/ee/user/packages/npm_registry/index.html#install-from-the-group-level## Used for packages:# ptchr-projects (2359913)# @nobears/statamic-nuxt-theme (53506017)# @nobears/nuxt-statamic (52687963)# @nobears/ui (53230662)
@nobears:registry=https://gitlab.com/api/v4/groups/2359913/-/packages/npm/
//gitlab.com/api/v4/groups/2359913/-/packages/npm/:_authToken=${GITLAB_TOKEN}//gitlab.com/api/v4/projects/53506017/packages/npm/:_authToken=${GITLAB_TOKEN}//gitlab.com/api/v4/projects/52687963/packages/npm/:_authToken=${GITLAB_TOKEN}//gitlab.com/api/v4/projects/...Add the new package to your .npmrc file:
.npmrc
shamefully-hoist=true
strict-peer-dependencies=false
auto-install-peers=true
@nobears-front-end:registry=https://git.nobears.nl/api/v4/packages/npm/
//git.nobears.nl/:_authToken=${GIT_NOBEARS_TOKEN}
Remove the old statamic-nuxt-theme package
Run the following command to remove the old @nobears/statamic-nuxt-theme package:
pnpm remove @nobears/statamic-nuxt-theme
Don't forget to remove the extends configuration from your nuxt.config.ts file.
nuxt.config.ts
export default defineNuxtConfig({
// ...
extends: ['@nobears/statamic-nuxt-theme'] // ...
});
Install dependencies
The following dependencies are now removed from your project.
@gtm-support/vue-gtm@nobears/nuxt-statamic(Should not be reinstalled)@nobears/ui(Should not be reinstalled)@nuxt/fonts@nuxt/icon@nuxt/image@nuxtjs/seo@nuxtjs/tailwindcss(Should not be reinstalled)@tailwindcss/typography
You can reinstall the desired dependencies by running the following command:
pnpm
pnpm add -D @gtm-support/vue-gtm @nuxt/fonts @nuxt/icon @nuxt/image @nuxtjs/seo @tailwindcss/typography
And add the corresponding modules to your nuxt.config.ts file:
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss', '@nuxt/fonts', '@nuxt/icon', '@nuxt/image', '@nuxtjs/seo', '@tailwindcss/typography', ],
});
Add the gtm support
The @nobears/statamic-nuxt-theme package included a custom gtm plugin.
You can add the gtm support by adding the following code to your project:
export default defineNuxtConfig({
runtimeConfig: {
public: {
gtmId: process.env.NUXT_PUBLIC_GTM_ID, }
},
});
NUXT_PUBLIC_GTM_ID=GTM-XXXXXXX
import { createGtm } from '@gtm-support/vue-gtm'
export default defineNuxtPlugin((nuxtApp) => {
const { gtmId } = useRuntimeConfig().public
const siteConfig = useSiteConfig()
if (siteConfig.env === 'staging' || siteConfig.env === 'production') {
if(!gtmId) {
console.error('No NUXT_PUBLIC_GTM_ID found in environment file.')
return
}
}
if(gtmId) {
nuxtApp.vueApp.use(createGtm({
id: gtmId,
defer: true, // Speed up page load
compatibility: false,
enabled: true,
debug: false,
loadScript: true,
vueRouter: useRouter(),
trackOnNextTick: false,
}))
}
})
Add the missing tailwind plugin
tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/typography'), ],
};
app/assets/css/tailwind.css
@plugin "@tailwindcss/typography";