vue-resume-component

0.3.3 • Public • Published

This package is WIP - it's functionally working, but customisations aren't implemented.

Logo

vue-resume-component

demo npm npm bundle size GitHub

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.

Usage

Installation

$ npm install vue-resume-component
$ yarn add vue-resume-component

Data

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.

Example

Vue.js example

<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>

Nuxt.js Example

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>

Idea

This is a component which can be implemented in existing websites or as standalone solution, e.g. with Nuxt.

Structure

  1. Segments - All the basic stuff for a CV: Education, Work, Voluntary, Side Projects, …
  2. Skills - Lists of stuff you are capable of: Programming, Language, Soft Skills, …
  3. Information - Content which isn't part of segments and skills: Name, Image, Logo, Links, …
  4. Settings - You can style, define orders (as it is, alphabetically, per date) or what you want to display.

Technologies

This component is using:

Roadmap

  • [ ] 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
  • [x] Add configurable dark mode

Development

Basic setup

  1. Install Vue CLI 3 (more details).
  2. Run vue serve --open src/components/Resume.vue - won't work until you provide mock data as defaults for the props.

Test environment

  1. This repo contains a complete Vue setup to test the package locally. This uses yalc to install the package locally.
  2. Start localhost with npm run serve in dev.
  3. Execute npm run publish:local in the root directory, which will cause a build and yalc publish.
  4. After this you can hard reload your localhost to see the changes, hot reload isn't working every time.
  5. If you want to deploy your changes locally, start over at 3..

Helpful Links

Package Sidebar

Install

npm i vue-resume-component

Weekly Downloads

2

Version

0.3.3

License

Apache-2.0

Unpacked Size

944 kB

Total Files

39

Last publish

Collaborators

  • luha