Composable idea: HTML meta

rijkvanzanten commented 4 years ago

Hi there!

I came across the need of dynamically updating the html's meta tag and instead of running straight to the great vue-meta I figured to have a look over here to see if there was a Vue composable available already.

Is this something you'd be interested in adding to vue-composable? I can provide a pull request to implement it if you'd like 🙂

pikax commented 4 years ago

Hello there 🙂

New composables and ideas are always welcome.

What's your idea for the API?

rijkvanzanten commented 4 years ago

I was thinking we could add a useHead function that takes an object of different head tag-types with values:

const title = computed(() => `${props.page}  | My Website`);

const meta = reactive([
  {
    name: 'description',
    content: 'We are developers that build things'
  },
  {
    name: 'robots',
    content: 'nofollow'
  }
]);

useHead({
  title: title,
  meta: meta,
});

This would also allow us to later on add support for other tags you might find in <head> like link and script

Alternatively, we can split them up in dedicated composables like:

const title = ref('About Us');

useTitle(title);

const meta = reactive([
  {
    name: 'description',
    content: 'We are developers that build things'
  },
  {
    name: 'robots',
    content: 'nofollow'
  }
]);

useMeta(meta);

pikax commented 4 years ago

Sounds good, we could have both, where the useHead would use the useMeta and useTitle

pikax / vue-composable

Composable idea: HTML meta #317