alpinealpine

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:

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

Meta tags

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

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    }  }})
app.config.ts

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

export default defineAppConfig({  alpine: {    socials: [      {        icon: 'twitter',        label: 'Twitter',        link: 'https://twitter.com/nuxtlabs'      },      {        icon: 'instagram',        label: 'Instagram',        link: 'https://www.instagram.com/atinuxt'      },      {        icon: 'linkedin',        label: 'LinkedIn',        link: 'https://www.linkedin.com/company/nuxtlabs'      }    ]  }})
app.config.ts

Theme display

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

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'      socials: { // Set to false to disable socials        icons: true, // possible value are : true | false        message: 'Follow me on' // string that will be displayed on top of the icons / text (leave empty to disable)      }  }})
app.config.ts