JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div id="app">
  
  <custom-menu align="left">
    <a v-for="link in links" :href="link.url">{{link.title}}</a><!-- ✅ valide -->
    Ce menu est aligné à {{align}} <!-- ❌ invalide car {{align}} ne fait pas partie de l'instance, mais est une prop de <custom-menu> .. et donc utilisable uniquement dans ce dernier -->
  
</div>

CSS

nav a {
  display: block;
}

Vue

new Vue({
	el : '#app',
  data() {
  	return {
    	links: [
      	{title: 'Google', url: '//google.fr'},
        {title: 'Qwant', url: '//qwant.fr'},
        {title: 'Duckduckgo', url: '//duckduckgo.com'},
      ]
    }
  },
  components: {
  	'custom-menu' : {
    	props: ['align'],
    	template: `<nav><slot></slot></nav>`
    }
  }
})