This package is WIP - it's functionally working, but customisations aren't implemented.
A resume / CV component for Vue.js and Nuxt.js.
I wouldn't recommend to use this package if you want a bullet proof CV as it uses some new technologies.
$ npm install vue-resume-component
$ yarn add vue-resume-component
You can find the latest data structure in demo/mock (a detailed documentation will be added later). It's recommended to use four different files ((learn more about this)[#structure]):
JSONs are just working out of the box, you could also include them in data
in the same component where you add vue-resume-component
. You also could think about consume data from Firebase or something completely different.
<template>
<resume
:segments="segments"
:skills="skills"
:information="information"
:settings="settings"
/>
</template>
<script>
import resume from 'vue-resume-component'
// Data
import segments from '@/content/cv/segments.json'
import skills from '@/content/cv/skills.json'
import information from '@/content/cv/information.json'
import settings from '@/content/cv/settings.json'
export default {
components: {
resume,
},
data() {
return {
segments,
skills,
information,
settings,
}
},
}
</script>
The only difference is that the component is wrapped in <client-only>
.
<template>
<client-only>
<resume
:segments="segments"
:skills="skills"
:information="information"
:settings="settings"
/>
</client-only>
</template>
<script>
import resume from 'vue-resume-component'
// Data
import segments from '@/content/cv/segments.json'
import skills from '@/content/cv/skills.json'
import information from '@/content/cv/information.json'
import settings from '@/content/cv/settings.json'
export default {
components: {
resume,
},
data() {
return {
segments,
skills,
information,
settings,
}
},
}
</script>
This is a component which can be implemented in existing websites or as standalone solution, e.g. with Nuxt.
- Segments - All the basic stuff for a CV: Education, Work, Voluntary, Side Projects, …
- Skills - Lists of stuff you are capable of: Programming, Language, Soft Skills, …
- Information - Content which isn't part of segments and skills: Name, Image, Logo, Links, …
- Settings - You can style, define orders (as it is, alphabetically, per date) or what you want to display.
This component is using:
- Vue3 (isn't a beta, but isn't as stable as Vue2 (personal gut feeling))
- CSS Variables (Custom Properties)
- CSS Grid
- Enable all customizations from settings
- Allow print to PDF
- Add docu with vuepress
- Provide example configs (currently visible in demo/mock)
- Add different demos
- Provide ready to clone nuxt/content repo with Deploy to Vercel & Netlify button
- Add tests
- Add configurable dark mode
- Install Vue CLI 3 (more details).
- Run
vue serve --open src/components/Resume.vue
- won't work until you provide mock data as defaults for the props.
- This repo contains a complete Vue setup to test the package locally. This uses yalc to install the package locally.
- Start localhost with
npm run serve
indev
. - Execute
npm run publish:local
in the root directory, which will cause a build andyalc publish
. - After this you can hard reload your localhost to see the changes, hot reload isn't working every time.
- If you want to deploy your changes locally, start over at
3.
.