|
--- |
|
title: "How to use Vue.js in a Hugo blog post" |
|
description: "Shows possibilities of using Vue.js without build step in a blog post." |
|
date: "2020-03-29" |
|
vue: true |
|
--- |
|
|
|
# Vue.js in a Hugo blog post |
|
|
|
<div id="cards" class="bg-blue-50 rounded-md"> |
|
<div class="max-w-md sm:max-w-xl lg:max-w-6xl mx-auto lg:px-12 py-8"> |
|
<div class="text-xl text-gray-900">Popular destinations</div> |
|
<div class="text-gray-600">A selection of great work-friendly cities with lots to see and explore.</div> |
|
<div class="flex flex-wrap -mx-4"> |
|
<div class="mt-6 w-full px-4 lg:w-1/2 xl:w-1/2" v-for="destination in destinations"> |
|
<div class="flex items-center rounded-md bg-white shadow-md overflow-hidden"> |
|
<img class="h-40 w-40 flex-shrink-0" :src="destination.img" :alt="destination.name"/> |
|
<div class="px-6 py-4"> |
|
<div class="text-lg font-semibold text-gray-800">{{ destination.name }}</div> |
|
<div class="text-gray-600">${{ destination.avg }} / night average</div> |
|
<div class="mt-4"> |
|
<a href="#" class="text-indigo-500 hover:text-indigo-400 font-semibold">Explore {{ destination.props }} properties</a> |
|
<div class="mt-1"> |
|
<div class="mt-2 flex flex-center"> |
|
<svg v-for="i in 5" :class="i <= destination.rating ? 'text-yellow-300' : 'text-gray-200'" class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"> |
|
<path d="M 23.946579,9.08402 C 23.818193,8.67059 23.47675,8.36928 23.065767,8.30686 L 16.095645,7.24705 12.978431,0.63656 C 12.794616,0.2468 12.415276,0 12.000001,0 11.584654,0 11.205313,0.2468 11.021571,0.63656 L 7.9045757,7.24697 0.93423529,8.30678 C 0.52325253,8.36928 0.18173676,8.67059 0.05342285,9.08395 -0.07489106,9.49738 0.03210994,9.95117 0.32954508,10.25452 L 5.3732856,15.39922 4.182163,22.66507 C 4.111969,23.0935 4.280217,23.52642 4.6162044,23.7819 4.8062748,23.92646 5.0314061,24 5.2576285,24 5.4312596,24 5.6056181,23.9567 5.7652831,23.86884 l 6.2346459,-3.43013 6.234572,3.43013 c 0.16061,0.0884 0.336496,0.13047 0.510709,0.13116 0.601927,-9.1e-4 1.089578,-0.51179 1.089578,-1.14188 0,-0.0877 -0.0095,-0.17318 -0.02735,-0.25517 l -1.180793,-7.20365 5.04374,-5.14478 c 0.297508,-0.30335 0.404509,-0.75714 0.276195,-1.1705 z"/> |
|
</svg> |
|
<span class="ml-2 text-gray-600 text-sm truncate"> {{ destination.reviews }} reviews</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="max-w-md sm:max-w-xl lg:max-w-6xl mx-auto lg:px-12 py-8 items-center text-center justify-center"> |
|
<span class=" text-lg font-semibold">{{ quote }}</span> |
|
<span> - Kanye West</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const app = new Vue({ |
|
el: '#cards', |
|
data: { |
|
destinations: [ |
|
{ name: 'Toronto', img: '//picsum.photos/250?id=1', avg: '120', props: 42, rating: 5, reviews: 255, }, |
|
{ name: 'Seattle', img: '//picsum.photos/250?id=2', avg: '135', props: 67, rating: 3, reviews: 102, }, |
|
{ name: 'New York', img: '//picsum.photos/250?id=3', avg: '180', props: 156, rating: 4, reviews: 1962, }, |
|
{ name: 'Huston', img: '//picsum.photos/250?id=4', avg: '110', props: 23, rating: 1, reviews: 387, }, |
|
], |
|
quote: 'Loading ...', |
|
}, |
|
methods: { |
|
getQuote: function () { |
|
fetch('https://api.kanye.rest') |
|
.then(response => response.json()) |
|
.then(data => this.quote = data.quote); |
|
} |
|
}, |
|
created() { |
|
this.getQuote(); |
|
}, |
|
}); |
|
</script> |