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
+ }
+ }
+})
+Social links
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'
+ }
+ }
+})
+
