├── .gitignore
├── problem1
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       └── HelloWorld.vue
    │   ├── layouts
    │       ├── LayoutA.vue
    │       └── LayoutB.vue
    │   ├── main.js
    │   ├── router
    │       └── index.js
    │   └── views
    │       ├── About.vue
    │       ├── Contact.vue
    │       └── Home.vue
├── problem2
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
    │   ├── App.vue
    │   ├── assets
    │       └── logo.png
    │   ├── components
    │       └── HelloWorld.vue
    │   ├── layouts
    │       ├── LayoutA.vue
    │       └── LayoutB.vue
    │   ├── main.js
    │   ├── router
    │       └── index.js
    │   └── views
    │       ├── About.vue
    │       ├── Contact.vue
    │       └── Home.vue
└── solution
    ├── .gitignore
    ├── README.md
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── favicon.ico
        └── index.html
    └── src
        ├── App.vue
        ├── assets
            └── logo.png
        ├── components
            └── HelloWorld.vue
        ├── layouts
            ├── LayoutA.vue
            └── LayoutB.vue
        ├── main.js
        ├── router
            └── index.js
        └── views
            ├── About.vue
            ├── Contact.vue
            └── Home.vue


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and not Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 
106 | # Stores VSCode versions used for testing VSCode extensions
107 | .vscode-test
108 | 


--------------------------------------------------------------------------------
/problem1/.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 | *.sw?
22 | 


--------------------------------------------------------------------------------
/problem1/README.md:
--------------------------------------------------------------------------------
 1 | # problem1
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/problem1/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/problem1/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "problem1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.1.5"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.2.0",
17 |     "@vue/cli-plugin-eslint": "~4.2.0",
18 |     "@vue/cli-plugin-router": "~4.2.0",
19 |     "@vue/cli-service": "~4.2.0",
20 |     "babel-eslint": "^10.0.3",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.1.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/problem1/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/problem1/public/favicon.ico


--------------------------------------------------------------------------------
/problem1/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/problem1/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name:"App"
10 | }
11 | </script>


--------------------------------------------------------------------------------
/problem1/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/problem1/src/assets/logo.png


--------------------------------------------------------------------------------
/problem1/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
14 |     </ul>
15 |     <h3>Essential Links</h3>
16 |     <ul>
17 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
18 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
19 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
20 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
21 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
22 |     </ul>
23 |     <h3>Ecosystem</h3>
24 |     <ul>
25 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
26 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
27 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
28 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
29 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
30 |     </ul>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   name: 'HelloWorld',
37 |   props: {
38 |     msg: String
39 |   }
40 | }
41 | </script>
42 | 
43 | <!-- Add "scoped" attribute to limit CSS to this component only -->
44 | <style scoped>
45 | h3 {
46 |   margin: 40px 0 0;
47 | }
48 | ul {
49 |   list-style-type: none;
50 |   padding: 0;
51 | }
52 | li {
53 |   display: inline-block;
54 |   margin: 0 10px;
55 | }
56 | a {
57 |   color: #42b983;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/problem1/src/layouts/LayoutA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT A</H1>
 4 |     <router-link to="/">Home Layout A </router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutA"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem1/src/layouts/LayoutB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT B</H1>
 4 |     <router-link to="/">Home Layout A</router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutB"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem1/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.mixin({
 8 |   created() {
 9 |     console.log('[created] ' + this.$options.name)
10 |   },
11 | });
12 | 
13 | new Vue({
14 |   router,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/problem1/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | import About from '../views/About.vue'
 5 | import Contact from '../views/Contact.vue'
 6 | Vue.use(VueRouter)
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     name: 'Home',
12 |     component: Home
13 |   },
14 |   {
15 |     path: '/about',
16 |     name: 'About',
17 |     component: About
18 |   },
19 |   {
20 |     path: '/contact',
21 |     name: 'contact',
22 |     component: Contact
23 |   }
24 | ]
25 | 
26 | const router = new VueRouter({
27 |   mode: 'history',
28 |   base: process.env.BASE_URL,
29 |   routes
30 | })
31 | 
32 | export default router
33 | 


--------------------------------------------------------------------------------
/problem1/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LayoutB>
 3 |     <div class="about">
 4 |       <h1>This is an about page</h1>
 5 |     </div>
 6 |   </LayoutB>
 7 | </template>
 8 | 
 9 | <script>
10 | import LayoutB from "../layouts/LayoutB";
11 | export default {
12 |   name: "About",
13 |   components: {
14 |     LayoutB
15 |   }
16 | };
17 | </script>


--------------------------------------------------------------------------------
/problem1/src/views/Contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LayoutA>
 3 |     <div class="contact">
 4 |       <h1>This is an Contact Page</h1>
 5 |     </div>
 6 |   </LayoutA>
 7 | </template>
 8 | 
 9 | <script>
10 | import LayoutA from "../layouts/LayoutA.vue";
11 | export default {
12 |   name: "Contact",
13 |   components: {
14 |     LayoutA
15 |   }
16 | };
17 | </script>


--------------------------------------------------------------------------------
/problem1/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <LayoutA>
 3 |     <div class="home">
 4 |       <img alt="Vue logo" src="../assets/logo.png" />
 5 |     </div>
 6 |   </LayoutA>
 7 | </template>
 8 | 
 9 | <script>
10 | import LayoutA from "../layouts/LayoutA";
11 | 
12 | export default {
13 |   name: "Home",
14 |   components: {
15 |     LayoutA
16 |   }
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/problem2/.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 | *.sw?
22 | 


--------------------------------------------------------------------------------
/problem2/README.md:
--------------------------------------------------------------------------------
 1 | # problem1
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/problem2/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/problem2/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "problem1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.1.5"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.2.0",
17 |     "@vue/cli-plugin-eslint": "~4.2.0",
18 |     "@vue/cli-plugin-router": "~4.2.0",
19 |     "@vue/cli-service": "~4.2.0",
20 |     "babel-eslint": "^10.0.3",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.1.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/problem2/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/problem2/public/favicon.ico


--------------------------------------------------------------------------------
/problem2/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/problem2/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <component :is="layout">
 4 |       <router-view :layout.sync="layout" />
 5 |     </component>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "App",
12 |   data() {
13 |     return {
14 |       layout: "div"
15 |     };
16 |   }
17 | };
18 | </script>


--------------------------------------------------------------------------------
/problem2/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/problem2/src/assets/logo.png


--------------------------------------------------------------------------------
/problem2/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
14 |     </ul>
15 |     <h3>Essential Links</h3>
16 |     <ul>
17 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
18 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
19 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
20 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
21 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
22 |     </ul>
23 |     <h3>Ecosystem</h3>
24 |     <ul>
25 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
26 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
27 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
28 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
29 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
30 |     </ul>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   name: 'HelloWorld',
37 |   props: {
38 |     msg: String
39 |   }
40 | }
41 | </script>
42 | 
43 | <!-- Add "scoped" attribute to limit CSS to this component only -->
44 | <style scoped>
45 | h3 {
46 |   margin: 40px 0 0;
47 | }
48 | ul {
49 |   list-style-type: none;
50 |   padding: 0;
51 | }
52 | li {
53 |   display: inline-block;
54 |   margin: 0 10px;
55 | }
56 | a {
57 |   color: #42b983;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/problem2/src/layouts/LayoutA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT A</H1>
 4 |     <router-link to="/">Home Layout A </router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutA"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem2/src/layouts/LayoutB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT B</H1>
 4 |     <router-link to="/">Home Layout A</router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutB"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem2/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.mixin({
 8 |   created() {
 9 |     console.log('[created] ' + this.$options.name)
10 |   },
11 | });
12 | 
13 | new Vue({
14 |   router,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/problem2/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | import About from '../views/About.vue'
 5 | import Contact from '../views/Contact.vue'
 6 | Vue.use(VueRouter)
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     name: 'Home',
12 |     component: Home
13 |   },
14 |   {
15 |     path: '/about',
16 |     name: 'About',
17 |     component: About
18 |   },
19 |   {
20 |     path: '/contact',
21 |     name: 'contact',
22 |     component: Contact
23 |   }
24 | ]
25 | 
26 | const router = new VueRouter({
27 |   mode: 'history',
28 |   base: process.env.BASE_URL,
29 |   routes
30 | })
31 | 
32 | export default router
33 | 


--------------------------------------------------------------------------------
/problem2/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import LayoutB from "../layouts/LayoutB";
 9 | export default {
10 |   name: "About",
11 |   created() {
12 |     this.$emit("update:layout", LayoutB);
13 |   }
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem2/src/views/Contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="contact">
 3 |     <h1>This is an Contact Page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import LayoutA from "../layouts/LayoutA.vue";
 9 | export default {
10 |   name: "Contact",
11 |   created() {
12 |     this.$emit("update:layout", LayoutA);
13 |   }
14 | };
15 | </script>


--------------------------------------------------------------------------------
/problem2/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import LayoutA from "../layouts/LayoutA";
 9 | 
10 | export default {
11 |   name: "Home",
12 |   created() {
13 |     this.$emit("update:layout", LayoutA);
14 |   }
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/solution/.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 | *.sw?
22 | 


--------------------------------------------------------------------------------
/solution/README.md:
--------------------------------------------------------------------------------
 1 | # problem1
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/solution/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/solution/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "problem1",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11",
13 |     "vue-router": "^3.1.5"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~4.2.0",
17 |     "@vue/cli-plugin-eslint": "~4.2.0",
18 |     "@vue/cli-plugin-router": "~4.2.0",
19 |     "@vue/cli-service": "~4.2.0",
20 |     "babel-eslint": "^10.0.3",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.1.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/solution/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/solution/public/favicon.ico


--------------------------------------------------------------------------------
/solution/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/solution/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <component :is="this.$route.meta.layout || 'div'">
 4 |       <router-view />
 5 |     </component>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "App",
12 | 
13 | };
14 | </script>


--------------------------------------------------------------------------------
/solution/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lampewebdev/vue-dynamic-layout-problems-and-solution/9ffbe391fe03284829936202e12640a2d046aa4d/solution/src/assets/logo.png


--------------------------------------------------------------------------------
/solution/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
14 |     </ul>
15 |     <h3>Essential Links</h3>
16 |     <ul>
17 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
18 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
19 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
20 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
21 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
22 |     </ul>
23 |     <h3>Ecosystem</h3>
24 |     <ul>
25 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
26 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
27 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
28 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
29 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
30 |     </ul>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   name: 'HelloWorld',
37 |   props: {
38 |     msg: String
39 |   }
40 | }
41 | </script>
42 | 
43 | <!-- Add "scoped" attribute to limit CSS to this component only -->
44 | <style scoped>
45 | h3 {
46 |   margin: 40px 0 0;
47 | }
48 | ul {
49 |   list-style-type: none;
50 |   padding: 0;
51 | }
52 | li {
53 |   display: inline-block;
54 |   margin: 0 10px;
55 | }
56 | a {
57 |   color: #42b983;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/solution/src/layouts/LayoutA.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT A</H1>
 4 |     <router-link to="/">Home Layout A </router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutA"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/solution/src/layouts/LayoutB.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <H1>LAYOUT B</H1>
 4 |     <router-link to="/">Home Layout A</router-link><br />
 5 |     <router-link to="/about">About Layout B</router-link><br />
 6 |     <router-link to="/contact">Contact Layout A</router-link><br />
 7 |     <slot />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "LayoutB"
14 | };
15 | </script>


--------------------------------------------------------------------------------
/solution/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | Vue.config.productionTip = false
 6 | 
 7 | Vue.mixin({
 8 |   created() {
 9 |     console.log('[created] ' + this.$options.name)
10 |   },
11 | });
12 | 
13 | new Vue({
14 |   router,
15 |   render: h => h(App)
16 | }).$mount('#app')
17 | 


--------------------------------------------------------------------------------
/solution/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | import About from '../views/About.vue'
 5 | import Contact from '../views/Contact.vue'
 6 | import LayoutA from '../layouts/LayoutA.vue'
 7 | import LayoutB from '../layouts/LayoutB.vue'
 8 | Vue.use(VueRouter)
 9 | 
10 | const routes = [
11 |   {
12 |     path: '/',
13 |     name: 'Home',
14 |     component: Home,
15 |     meta: { layout: LayoutA }
16 |   },
17 |   {
18 |     path: '/about',
19 |     name: 'About',
20 |     component: About,
21 |     meta: { layout: LayoutB }
22 |   },
23 |   {
24 |     path: '/contact',
25 |     name: 'contact',
26 |     component: Contact,
27 |     meta: { layout: LayoutA }
28 |   }
29 | ]
30 | 
31 | const router = new VueRouter({
32 |   mode: 'history',
33 |   base: process.env.BASE_URL,
34 |   routes
35 | })
36 | 
37 | export default router
38 | 


--------------------------------------------------------------------------------
/solution/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "About"
10 | };
11 | </script>


--------------------------------------------------------------------------------
/solution/src/views/Contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="contact">
 3 |     <h1>This is an Contact Page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "Contact"
10 | };
11 | </script>


--------------------------------------------------------------------------------
/solution/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "Home"
10 | };
11 | </script>
12 | 


--------------------------------------------------------------------------------