Vue Quickstart

Starter template for a Vue 3 site - including docs and CI deploy to GH Pages

Preview

Use this project

After you've looked at the demo screenshot and site, you are welcome to create your own using the template button. This will copy this project and add it to your repos (no forking needed, but please star the original repo).

Documentation

How to install and run the app locally and deploy it to GH Pages

About

What is Vue?

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Why not React?

Vue is intended to be more beginner-friendly (I agree it is) and the vue repo has more GH stars than the react repo, if that is any indication of adoption by the community.

Vue is open-source and was created by one person originally. React was created at Facebook.

Resources

Need are some resources to get started or learn more advanced topics?

See Vue in my Learn to Code project.

Origin

This project was created using the Vue CLI:

$ vue create my-project
$ # OR if not installed.
$ npx @vue/cli create my-project

See the Creating a project section of the docs.

This project used mostly default content from that command, but adds the following:

• Sample image
• Detailed docs
• GH Pages setup
• Linting with and without fixes
• Prettier

On the last point, the prettier package was added so that it can be used when linting to pick up inconsistent styling. For example:

...
warning: Insert `;` (prettier/prettier) at vue.config.js:5:2:
...

See these areas in package.json:

• eslint-plugin-prettier package
• prettier package
• @vue/prettier in ESLint config

That based on what you get in the Vue Router setup.

Related projects

• Vue-based projects:
  • Vue TypeScript Quickstart - like this project but with TypeScript added.
  • Vue Router Quickstart - like this project but with Vue Router added for a multi-page site.
  • Vue Vuex Quickstart - like this project but with Vuex added.
  • VuePress Quickstart - using VuePress, a static site generator built on a Vue.
  • Nuxt Default Quickstart - using Nuxt, a mix between a SPA and a static site generator that is built on Vue.
  • Vue Frontend Quickstart - a simple site that uses Vue on the frontend without Node or build step.
• React Quickstart - like this project, but using React instead of Vue.
• Node Project Template - a more generic Node template.

License

Released under MIT by @MichaelCurrin.