Vue Js Roadmap
Tags: vue, roadmap
Published: 2022-06-16 09:35:00

## Overview of Vue Js 3

#Github Page [VUE JS ROADMAP](https://priteshbhoi.github.io/Vue-Js-3-Roadmap/)

- Rebuilt for Vue 3 using the new composition api
- Global properties that allow you to make large overarching changes to your app
- Improved SASS variable customization and extensibility with Built-In Modules
- New Vue CLI presets for generating pre-built starting projects
- First party Vite support for lightning fast development
- Greatly improved TypeScript support
- Better framework coverage with E2E testing using Cypress

## Vue Js 3 RoadMap

`<ol dir="auto">
<li>
<p dir="auto">IDEs</p>
<ul dir="auto">
<li><a href="https://visualstudio.microsoft.com/downloads/" rel="nofollow">visualstudio</a></li>
<li><a href="https://code.visualstudio.com/Download" rel="nofollow">visualstudioCode</a></li>
</ul>
</li>
<li>
<p dir="auto">HTML</p>
<ul dir="auto">
<li><a href="https://www.w3schools.com/html/" rel="nofollow">w3schools</a> HTML Tutorial</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" rel="nofollow">MDN Web Docs</a> HTML: HyperText Markup Language</li>
</ul>
</li>
<li>
<p dir="auto">CSS</p>
<ul dir="auto">
<li><a href="https://www.w3schools.com/css/" rel="nofollow">w3schools</a> CSS Tutorial</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" rel="nofollow">MDN Web Docs</a> CSS: Cascading Style Sheets</li>
<li><a href="https://fontawesome.com/" rel="nofollow">fontawesome</a> Official website</li>
<li><a href="https://www.w3schools.com/icons/icons_reference.asp" rel="nofollow">w3schools</a> Icons Reference</li>
</ul>
</li>
<li>
<p dir="auto">JavaScript</p>
<p dir="auto"><em>Basic</em></p>
<ul dir="auto">
<li><a href="https://www.w3schools.com/js/default.asp" rel="nofollow">w3schools</a> JavaScript Tutorial</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" rel="nofollow">developer.mozilla</a> JavaScript</li>
<li><a href="https://javascript.info/" rel="nofollow">javascript.info</a> The Modern JavaScript Tutorial</li>
<li><a href="https://htmlcheatsheet.com/js/" rel="nofollow">htmlcheatsheet</a> JS CheatSheet</li>
</ul>
<p dir="auto"><em>es6</em></p>
<ul dir="auto">
<li><a href="https://exploringjs.com/es6/index.html" rel="nofollow">exploringjs</a> Exploring ES6</li>
<li><a href="http://es6-features.org/#Constants" rel="nofollow">es6-features</a> ECMAScript 6 — New Features: Overview &amp; Comparison</li>
<li><a href="https://jsfeatures.in" rel="nofollow">jsfeatures</a> jsfeatures</li>
<li><a href="https://babeljs.io/docs/en/learn" rel="nofollow">babeljs</a> Learn ES2015</li>
<li><a href="https://github.com/lukehoban/es6features">github</a> ECMAScript 6</li>
<li><a href="https://github.com/sudheerj/ECMAScript-features">github</a> ECMAScript 6</li>
</ul>
<p dir="auto"><em>Style Guide</em></p>
<ul dir="auto">
<li><a href="https://github.com/airbnb/javascript">github</a> Airbnb JavaScript Style Guide</li>
<li><a href="https://github.com/ryanmcdermott/clean-code-javascript">github</a> clean-code-javascript</li>
</ul>
<p dir="auto"><em>playground</em></p>
<ul dir="auto">
<li><a href="https://js-array-playground.firebaseapp.com/" rel="nofollow">js-array-playground</a> JavaScript Array Playground</li>
<li><a href="https://jsfiddle.net/" rel="nofollow">jsfiddle</a></li>
<li><a href="https://plnkr.co/" rel="nofollow">plnkr</a></li>
<li><a href="https://jsbin.com/?html,output" rel="nofollow">jsbin</a></li>
<li><a href="https://codepen.io/pen/" rel="nofollow">codepen</a></li>
<li><a href="https://stackblitz.com/" rel="nofollow">stackblitz</a></li>
</ul>
</li>
<li>
<p dir="auto">Vue</p>
<ul dir="auto">
<li><a href="https://vuejs.org/" rel="nofollow">official website</a></li>
<li><a href="https://vuejs.org/v2/guide/forms.html" rel="nofollow">View forms</a></li>
<li><a href="https://vuejs.org/v2/guide/components.html" rel="nofollow">View components</a></li>
</ul>
</li>
<li>
<p dir="auto">Routing</p>
<ul dir="auto">
<li><a href="https://router.vuejs.org/" rel="nofollow">Vue Router</a></li>
<li><a href="https://router5.js.org/" rel="nofollow">Router5</a></li>
</ul>
</li>
<li>
<p dir="auto">Type Checkers</p>
<ul dir="auto">
<li><a href="https://www.typescriptlang.org/" rel="nofollow">TypeScript</a></li>
<li><a href="https://vuejs.org/v2/guide/typescript.html" rel="nofollow">TypeScript</a></li>
<li><a href="https://flow.org/en/" rel="nofollow">Flow</a></li>
</ul>
</li>
<li>
<p dir="auto">Build Tools</p>
<ul dir="auto">
<li>Package Managers
<ul dir="auto">
<li><a href="https://www.npmjs.com/" rel="nofollow">npm</a></li>
<li><a href="https://yarnpkg.com/lang/en/" rel="nofollow">yarn</a></li>
<li><a href="https://pnpm.js.org/" rel="nofollow">pnpm</a></li>
</ul>
</li>
<li>Module Bundlers
<ul dir="auto">
<li><a href="https://cli.vuejs.org/" rel="nofollow">vue-cli</a></li>
<li><a href="https://webpack.js.org/" rel="nofollow">Webpack</a></li>
<li><a href="https://bazel.build/" rel="nofollow">Bazel</a></li>
<li><a href="https://rollupjs.org/guide/en" rel="nofollow">Rollup</a></li>
<li><a href="http://browserify.org/" rel="nofollow">Browserify</a></li>
<li><a href="https://fuse-box.org/" rel="nofollow">FuseBox</a></li>
</ul>
</li>
<li>Task Runners
<ul dir="auto">
<li><a href="https://docs.npmjs.com/misc/scripts" rel="nofollow">npm scripts</a></li>
<li><a href="https://gulpjs.com/" rel="nofollow">gulp</a></li>
<li><a href="https://gruntjs.com/" rel="nofollow">grunt</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p dir="auto">UI Design</p>
<ul dir="auto">
<li>CSS Preprocessor
<ul dir="auto">
<li><a href="https://sass-lang.com/" rel="nofollow">Sass/CSS</a></li>
<li><a href="https://postcss.org/" rel="nofollow">PostCSS</a></li>
<li><a href="http://lesscss.org/" rel="nofollow">Less</a></li>
<li><a href="http://stylus-lang.com/" rel="nofollow">Stylus</a></li>
</ul>
</li>
<li>CSS Frameworks
<ul dir="auto">
<li><a href="https://getbootstrap.com/" rel="nofollow">Bootstrap</a></li>
<li><a href="https://materializecss.com/" rel="nofollow">Materialize</a></li>
<li><a href="https://bulma.io/" rel="nofollow">Bulma</a></li>
<li><a href="https://semantic-ui.com/" rel="nofollow">Semantic UI</a></li>
</ul>
</li>
<li>CSS in JS
<ul dir="auto">
<li><a href="https://www.styled-components.com/" rel="nofollow">Styled Components</a></li>
<li><a href="https://formidable.com/open-source/radium/" rel="nofollow">Radium</a></li>
<li><a href="https://emotion.sh/" rel="nofollow">Emotion</a></li>
<li><a href="http://cssinjs.org/" rel="nofollow">JSS</a></li>
<li><a href="https://github.com/Khan/aphrodite">Aphrodite</a></li>
</ul>
</li>
<li>Component libraries
<ul dir="auto">
<li><a href="https://quasar-framework.org/" rel="nofollow">Quasar</a></li>
<li><a href="https://vuetifyjs.com/en/" rel="nofollow">Vuetify</a></li>
<li><a href="https://www.iviewui.com/" rel="nofollow">iView</a></li>
<li><a href="https://lusaxweb.github.io/vuesax/" rel="nofollow">Vuesax</a></li>
<li><a href="https://bootstrap-vue.js.org/" rel="nofollow">bootstrap-vue</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p dir="auto">State Management</p>
<ul dir="auto">
<li><a href="https://vuejs.org/v2/guide/state-management.html" rel="nofollow">Component state</a></li>
<li><a href="https://vuex.vuejs.org/" rel="nofollow">Vuex</a>
<ul dir="auto">
<li>Data persistence
<ul dir="auto">
<li><a href="https://github.com/robinvdvleuten/vuex-persistedstate">vue-persistedstate</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p dir="auto">API Clients</p>
<ul dir="auto">
<li>REST
<ul dir="auto">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="nofollow">Fetch</a></li>
<li><a href="https://visionmedia.github.io/superagent/" rel="nofollow">SuperAgent</a></li>
<li><a href="https://github.com/axios/axios">axios</a></li>
</ul>
</li>
<li>GraphQL
<ul dir="auto">
<li><a href="https://apollo.vuejs.org/" rel="nofollow">Apollo</a></li>
<li><a href="https://facebook.github.io/relay/" rel="nofollow">Relay</a></li>
<li><a href="https://github.com/FormidableLabs/urql">urql</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p dir="auto">Utility Libraries</p>
<ul dir="auto">
<li><a href="https://lodash.com/" rel="nofollow">Lodash</a></li>
<li><a href="https://momentjs.com/" rel="nofollow">Moment</a></li>
<li><a href="https://github.com/JedWatson/classnames">classnames</a></li>
<li><a href="http://numeraljs.com/" rel="nofollow">Numeral</a></li>
<li><a href="http://reactivex.io/" rel="nofollow">RxJS</a></li>
<li><a href="https://facebook.github.io/immutable-js/" rel="nofollow">ImmutableJS</a></li>
<li><a href="https://ramdajs.com/" rel="nofollow">Ramda</a></li>
</ul>
</li>
<li>
<p dir="auto">Coding style</p>
<ul dir="auto">
<li><a href="https://palantir.github.io/tslint/" rel="nofollow">TSLint</a></li>
<li><a href="https://prettier.io/" rel="nofollow">Prettier</a></li>
</ul>
</li>
<li>
<p dir="auto">Testing</p>
<ul dir="auto">
<li>Unit Testing
<ul dir="auto">
<li><a href="https://facebook.github.io/jest/" rel="nofollow">Jest</a></li>
<li><a href="https://github.com/vuejs/vue-test-utils/">vue-test-utils</a></li>
<li><a href="http://sinonjs.org/" rel="nofollow">Sinon</a></li>
<li><a href="https://mochajs.org/" rel="nofollow">Mocha</a></li>
<li><a href="http://www.chaijs.com/" rel="nofollow">Chai</a></li>
<li><a href="https://github.com/avajs/ava">AVA</a></li>
<li><a href="https://github.com/substack/tape">Tape</a></li>
</ul>
</li>
<li>End to End Testing
<ul dir="auto">
<li><a href="http://nightwatchjs.org/" rel="nofollow">Nightwatch</a></li>
<li><a href="https://www.seleniumhq.org/" rel="nofollow">Selenium</a></li>
<li><a href="http://webdriver.io/" rel="nofollow">Webdriver</a></li>
<li><a href="https://pptr.dev/" rel="nofollow">Puppeteer</a></li>
<li><a href="https://github.com/cucumber/cucumber-js">Cucumber.js</a></li>
</ul>
</li>
<li>Integration Testing
<ul dir="auto">
<li><a href="https://karma-runner.github.io/" rel="nofollow">Karma</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p dir="auto">Internationalization</p>
<ul dir="auto">
<li><a href="https://kazupon.github.io/vue-i18n/" rel="nofollow">vue-i18n</a></li>
</ul>
</li>
<li>
<p dir="auto">Server Side Rendering</p>
<ul dir="auto">
<li><a href="https://nuxtjs.org/" rel="nofollow">Nuxt</a></li>
</ul>
</li>
<li>
<p dir="auto">Static Site Generator</p>
<ul dir="auto">
<li><a href="https://vuepress.vuejs.org/" rel="nofollow">VuePress</a></li>
</ul>
</li>
<li>
<p dir="auto">Progressive Web Apps</p>
<ul dir="auto">
<li><a href="https://quasar-framework.org/" rel="nofollow">Quasar</a></li>
</ul>
</li>
<li>
<p dir="auto">Mobile Application Development</p>
<ul dir="auto">
<li><a href="https://quasar-framework.org/" rel="nofollow">Quasar</a></li>
<li><a href="https://github.com/GeekyAnts/vue-native-core/">Vue Native</a></li>
<li><a href="https://nativescript-vue.org/" rel="nofollow">Nativescript Vue</a></li>
<li><a href="https://weex.incubator.apache.org/" rel="nofollow">Weex</a></li>
</ul>
</li>
<li>
<p dir="auto">Desktop Application Development</p>
<ul dir="auto">
<li><a href="https://quasar-framework.org/" rel="nofollow">Quasar</a></li>
<li><a href="https://electronjs.org/" rel="nofollow">Electron</a></li>
<li><a href="https://nwjs.io/" rel="nofollow">NW.js</a></li>
<li><a href="https://vuido.mimec.org/" rel="nofollow">Vuido</a></li>
</ul>
</li>
</ol>`

[Bhylu](bhylu.com)