Back

Configure Alpine

Configure Alpine

To configure meta tags, social links or even the Alpine theme display, update the alpine key in the app.config.ts at the root of your project:

app.config.ts
export default defineAppConfig({  alpine: {    /* Alpine configuration goes here */  }}

You can look at the default config.

The config schema also gives comments on all the configuration parameters.

Meta tags

Configure the title, description and social image of your website:

app.config.ts
export default defineAppConfig({  alpine: {    title: 'Alpine',    description: 'The minimalist blog theme',    image: '/social-card-preview.png',    // image can also be an object:    image: {      src: '/social-card-preview.png',      alt: 'An image showcasing my project.',      width: 400,      height: 300    }  }})

To configure the social links displayed in the footer, use the socials property:

app.config.ts
export default defineAppConfig({  alpine: {    socials: {      twitter: 'nuxtlabs',      instagram: 'wearenuxt',      linkedin: {        icon: 'uil:linkedin',        label: 'LinkedIn',        href: 'https://www.linkedin.com/company/nuxtlabs'      },      mastodon: {        icon: 'simple-icons:mastodon',        label: 'Mastodon',        href: 'https://m.webtoo.ls/@nuxt',        rel: 'me'      }    }  }})

Theme display

Alpine Header and Footer can also be customized via the app.config.ts file:

app.config.ts
defineAppConfig({  alpine: {    // Remove header with header: false    header: {      position: 'inline', // possible value are : 'none' | 'left' | 'center' | 'right' | 'inline'      logo: false    },    // Remove header with footer: false    footer: {      credits: {        enabled: true, // possible value are : true | false        repository: 'https://www.github.com/nuxt-themes/alpine' // our github repository      },      navigation: false, // possible value are : true | false      position: 'center', // possible value are : 'none' | 'left' | 'center' | 'right'      message: 'Follow me on' // string that will be displayed on the footer (leave empty or delete to disable)    }    // Disable back to top button: false    backToTop: {      text: 'Back to top',      icon: 'material-symbols:arrow-upward'    }  }})
Back to top