remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Julien Calixte
2021-03-09 22:00:10 +01:00
commit 70c0886aa5
52 changed files with 12763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/FooterTranslation.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<footer class="footer-translation">
<button class="button" @click="toggleLanguage">
{{ t('toggle-lang') }}
</button>
</footer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { locales } from '@/locales/message'
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'FooterTranslation',
setup() {
const { t } = useI18n()
const i18n = useI18n()
return {
t,
toggleLanguage: () =>
(i18n.locale.value =
locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length])
}
}
})
</script>
<style lang="scss" scoped>
.footer-translation {
}
</style>

184
src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,184 @@
<template>
<div class="hello">
<h1 class="title is-1">{{ t('hello') }}</h1>
<h2 class="subtitle is-2">{{ upperMessage }}</h2>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3 class="title is-3">Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
target="_blank"
rel="noopener"
>unit-jest</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank"
rel="noopener"
>typescript</a
>
</li>
</ul>
<h3 class="title is-3">Installed command</h3>
<ul>
<li>
<code>yarn pwa:asset</code> (or <code>npm run pwa:asset</code>) creates
all the assets for the PWA asset. Just change the logo.svg in the img
folder and let the magic do the rest.
</li>
</ul>
<h3 class="title is-3">Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3 class="title is-3">Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
<FooterTranslation class="footer-translation" />
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import FooterTranslation from '@/components/FooterTranslation.vue'
export default defineComponent({
name: 'HelloWorld',
components: {
FooterTranslation
},
props: {
msg: String
},
setup(props) {
const { t } = useI18n()
const upperMessage = computed(() => {
return (props.msg ?? '').toUpperCase()
})
return {
upperMessage,
t
}
}
})
</script>
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.footer-translation {
margin-top: 1rem;
}
</style>