← Back

Vue - Introduction

My first Vue experience. Below I am using a Header component and a Button component.

Header Component

The Header is just a presentational component and with Astro I can make this static by not setting any client: param on it. This component has a couple of slots, the first being a named "header" slot and the other being the normal slot.

I am in the Header slot
I am just flowing in the default slot

Button component

The Button component is a bit more interesting. It has a client:load param which means that it will be rendered on the client side. This component also has a slot, but this time it is a named slot called "pre".