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