├── .gitignore ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── DemoFive.vue │ ├── DemoFour.vue │ ├── DemoOne.vue │ ├── DemoThree.vue │ ├── DemoTwo.vue │ ├── Home.vue │ ├── v1 │ │ ├── DynamicOne.vue │ │ └── DynamicTwo.vue │ ├── v2 │ │ ├── DynamicOne.vue │ │ └── DynamicTwo.vue │ ├── v3 │ │ ├── NumberInput.vue │ │ ├── SelectList.vue │ │ └── TextInput.vue │ ├── v4 │ │ ├── NumberInput.vue │ │ ├── SelectList.vue │ │ └── TextInput.vue │ └── v5 │ │ ├── FormGenerator.vue │ │ ├── NumberInput.vue │ │ ├── SelectList.vue │ │ └── TextInput.vue ├── main.js └── router │ └── index.js ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-dynamic-components", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve --open", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.13", 12 | "vue-router": "^3.0.1" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.0-alpha.11", 16 | "@vue/cli-plugin-eslint": "^3.0.0-alpha.11", 17 | "@vue/cli-service": "^3.0.0-alpha.11", 18 | "vue-template-compiler": "^2.5.13" 19 | }, 20 | "babel": { 21 | "presets": [ 22 | "@vue/app" 23 | ] 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "extends": [ 28 | "plugin:vue/essential", 29 | "eslint:recommended" 30 | ] 31 | }, 32 | "postcss": { 33 | "plugins": { 34 | "autoprefixer": {} 35 | } 36 | }, 37 | "browserslist": [ 38 | "> 1%", 39 | "last 2 versions", 40 | "not ie <= 8" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/e-schultz/vue-dynamic-components/c9ba17646e9ac5cd7f0d4ac790abd4e56e58a317/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-dynamic-components 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 44 | 45 | 64 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/e-schultz/vue-dynamic-components/c9ba17646e9ac5cd7f0d4ac790abd4e56e58a317/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/DemoFive.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 58 | -------------------------------------------------------------------------------- /src/components/DemoFour.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 62 | -------------------------------------------------------------------------------- /src/components/DemoOne.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/DemoThree.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 56 | -------------------------------------------------------------------------------- /src/components/DemoTwo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 47 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/v1/DynamicOne.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/v1/DynamicTwo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/v2/DynamicOne.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/v2/DynamicTwo.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/v3/NumberInput.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/components/v3/SelectList.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/v3/TextInput.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/components/v4/NumberInput.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/v4/SelectList.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/v4/TextInput.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/components/v5/FormGenerator.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 34 | -------------------------------------------------------------------------------- /src/components/v5/NumberInput.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/v5/SelectList.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/components/v5/TextInput.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | // import VueRouter from "vue-router"; 4 | import router from "./router"; 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | router 10 | }).$mount("#app"); 11 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import Home from "../components/Home"; 4 | import DemoOne from "../components/DemoOne.vue"; 5 | import DemoTwo from "../components/DemoTwo.vue"; 6 | import DemoThree from "../components/DemoThree.vue"; 7 | import DemoFour from "../components/DemoFour.vue"; 8 | import DemoFive from "../components/DemoFive.vue"; 9 | 10 | Vue.use(Router); 11 | 12 | export default new Router({ 13 | mode: "history", 14 | routes: [ 15 | { 16 | path: "/", 17 | name: "Home", 18 | component: Home 19 | }, 20 | { 21 | path: "/demo-1", 22 | name: "DemoOne", 23 | component: DemoOne 24 | }, 25 | { 26 | path: "/demo-2", 27 | name: "DemoTwo", 28 | component: DemoTwo 29 | }, 30 | { 31 | path: "/demo-3", 32 | name: "DemoThree", 33 | component: DemoThree 34 | }, 35 | { 36 | path: "/demo-4", 37 | name: "DemoFour", 38 | component: DemoFour 39 | }, 40 | { 41 | path: "/demo-5", 42 | name: "DemoFive", 43 | component: DemoFive 44 | } 45 | ] 46 | }); 47 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: true 3 | } --------------------------------------------------------------------------------