/* Additional CSS has been imported from unpkg */
/* https://unpkg.com/@creativecommons/vocabulary/css/root.css */
/* https://unpkg.com/@creativecommons/vocabulary/css/index.css */
$color-pure-white = #ffffff
$color-grey-1 = #f1f3f5
.index
main
display flex
flex-direction column
align-items center
justify-content center
background radial-gradient($color-pure-white, $color-grey-1)
min-height 100vh
View Compiled
/* Additional JS has been imported from unpkg */
/* https://unpkg.com/vue */
/* https://unpkg.com/vue-i18n */
/* https://unpkg.com/@creativecommons/vue-vocabulary */
const messages = {
'en': {
'hello': 'he·llo',
'world': 'world',
'noun': 'noun',
'pronunciation': {
'hello': 'hə\ˈləʊ',
'world': 'wəːld'
}
},
'hi': {
'hello': 'न·म·स्ते',
'world': 'दु·नि·या',
'noun': ' संज्ञा',
'pronunciation': {
'hello': 'नमस्ते',
'world': 'दुनिया',
}
}
}
const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
messages
})
new Vue({
i18n,
components: {
'Header': vocabulary.Header,
'Container': vocabulary.Container,
'Definition': vocabulary.Definition,
'Footer': vocabulary.Footer,
'BrandImagery': vocabulary.BrandImagery,
'Quote': vocabulary.Quote,
'Locale': vocabulary.Locale
},
template: `
<div id="app"><div class="index">
<main>
<Container>
<Definition
brand="orange"
:pronunciation="\`\${ $t('pronunciation.hello') } \${ $t('pronunciation.world') }\`"
:part-of-speech="$t('noun')">
<template #word>
{{ $t('hello') }}␣{{ $t('world') }}
</template>
<ul>
<li class="unimportant">
a simple program often used to illustrate
the basic syntax of a programming language
</li>
<li>
a message indicating the successful setup
of Vocabulary in your application
</li>
</ul>
</Definition>
</Container>
</main>
<Footer>
<template #logo>
<span class="logo">
<BrandImagery
type="lettermark"
color="white"
size="small"
is-centered/>
<BrandImagery
brand="vocabulary"
color="white"
size="small"
is-centered/>
</span>
</template>
<Locale brand="orange"/>
</Footer>
</div></div>
`
}).$mount('div#app')
