{"id":105,"date":"2019-08-31T06:08:49","date_gmt":"2019-08-31T06:08:49","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/vuely\/?page_id=105"},"modified":"2019-10-19T06:56:25","modified_gmt":"2019-10-19T06:56:25","slug":"different-layouts","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/vuely\/different-layouts\/","title":{"rendered":"Different Layouts"},"content":{"rendered":"\n
Default Layout<\/h6>\n\n\n\n
\"\"<\/a>
Default Layout<\/figcaption><\/figure>\n\n\n\n

This is the default layout of your template, when you download the project from ThemeForest<\/strong> and builds it after the installation procedure, you will find that your template uses this layout by default. You don’t need to change anything to use this layout. <\/p>\n\n\n\n

Mini Sidebar<\/h5>\n\n\n\n
\"\"<\/a>
Mini Sidebar<\/figcaption><\/figure>\n\n\n\n

This is the Mini Sidebar layout for the template. You can make this layout as default by making these changes in the src->router->default.js<\/code> file: <\/p>\n\n\n\n

Steps: <\/strong><\/h6>\n\n\n\n

1. Replace the import statement from <\/p>\n\n\n\n

 import Full from 'Container\/Full' 
<\/pre>\n\n\n\n
  to <\/p>\n\n\n\n
import MiniSidebarLayout from 'Container\/MiniSidebarLayout'
<\/pre>\n\n\n\n
2.. Now search for <\/g>export default<\/code> function<\/g> in the same file. You will find the given function as below:<\/p>\n\n\n\n
export default {
   path: '\/',
   component: Full,
<\/pre>\n\n\n\n
Now Replace the value of the component key from Full<\/code> to MiniSidebarLayout<\/code><\/p>\n\n\n\n
Now your export default<\/code> will become<\/p>\n\n\n\n
export default {
   path: '\/',
   component: MiniSidebarLayout,
<\/pre>\n\n\n\n
Now save the file and open up the browser window and open the url<\/g>: http:\/\/localhost:8080\/<\/a><\/p>\n\n\n\n
If you don’t see the changes, don’t panic. Just run the following command in command prompt or terminal, then try again. You will see the desired result.<\/p>\n\n\n\n
npm run serve<\/pre>\n\n\n\n
Horizontal Menu<\/h5>\n\n\n\n
\"\"<\/a>
Horizontal Menu<\/figcaption><\/figure>\n\n\n\n
Steps:<\/h6>\n\n\n\n
1.Replace the import statement from <\/p>\n\n\n\n
import Full from 'Container\/Full'
<\/pre>\n\n\n\n
to<\/p>\n\n\n\n
import HorizontalLayout from 'Container\/HorizontalLayout'
<\/pre>\n\n\n\n
  2. Now search for <\/g>export default<\/code> function<\/g> in the same file. You will find the given function as below:<\/p>\n\n\n\n
export default {
   path: '\/',
   component: Full,<\/pre>\n\n\n\n
Now Replace the value of the component key from Full<\/code> to HorizontalLayout<\/code><\/p>\n\n\n\n
Now your<\/g><\/g> export default<\/code> will become<\/p>\n\n\n\n
export default {
   path: '\/',
   component: HorizontalLayout,<\/pre>\n\n\n\n
Now save the file and open up the browser window and open the url<\/g>: http:\/\/localhost:8080\/<\/a><\/p>\n\n\n\n
If you don’t see the changes, don’t panic. Just run the following command in command prompt or terminal, then try again. You will see the desired result.<\/p>\n\n\n\n
npm run serve<\/pre>\n\n\n\n
Boxed<\/h5>\n\n\n\n
 There are two versions for boxed layout: One is Boxed Agency Version, another is Boxed News Version. Below are the screenshots for both the boxed versions & the steps that needs to be followed to make them your default template layout. <\/p>\n\n\n\n
Boxed Agency Version<\/h5>\n\n\n\n
\"\"<\/a>
 Boxed Agency Version<\/figcaption><\/figure>\n\n\n\n
This is the Boxed Agency Version layout for the template. You can make this layout as default by making the these<\/g> changes in the src->router->default.js<\/code> file:<\/p>\n\n\n\n
Steps:<\/h6>\n\n\n\n
1.Replace the import statement from<\/p>\n\n\n\n
import Full from 'Container\/Full'<\/pre>\n\n\n\n
to<\/p>\n\n\n\n
import BoxedLayout from 'Container\/Boxed'<\/pre>\n\n\n\n
2. Now search for <\/g>export default<\/code> function<\/g> in the same file. You will find the given function as below:<\/p>\n\n\n\n
export default {
   path: '\/',
   component: Full,<\/pre>\n\n\n\n
Now Replace the value of the component key from Full<\/code> to BoxedLayout<\/code><\/p>\n\n\n\n
Now your<\/g><\/g> export default<\/code> will become<\/p>\n\n\n\n
export default {
   path: '\/',
   component: BoxedLayout,
<\/pre>\n\n\n\n
Now save the file and open up the browser window and open the url<\/g>: http:\/\/localhost:8080\/<\/a><\/p>\n\n\n\n
If you don’t see the changes, don’t panic. Just run the following command in command prompt or terminal, then try again. You will see the desired result.<\/p>\n\n\n\n
npm run serve<\/pre>\n\n\n\n
Boxed News Version<\/h5>\n\n\n\n
\"\"<\/a>
Boxed News Version<\/figcaption><\/figure>\n\n\n\n
 This is the Boxed News Version layout for the template. You can make this layout as default by making the these changes in the src->router->default.js<\/code> file: <\/p>\n\n\n\n
 Steps: <\/strong><\/h6>\n\n\n\n
 1. Replace the import statement from<\/p>\n\n\n\n
import Full from 'Container\/Full'\n\n<\/pre>\n\n\n\n
to<\/p>\n\n\n\n
import BoxedLayout from 'Container\/BoxedV2' <\/pre>\n\n\n\n
This is the Horizontal Menu layout for the template. You can make this layout as default by making the these<\/g> changes in the src->router->default.js<\/code> file:<\/p>\n\n\n\n
2. Now search for export default<\/code> function in the same file. You will find the given function as below: <\/p>\n\n\n\n
 export default {
   path: '\/',
   component: Full, <\/pre>\n\n\n\n
 Now Replace the value of the component key from Full<\/code> to BoxedLayout<\/code><\/p>\n\n\n\n
 Now your export default<\/code> will become <\/p>\n\n\n\n
export default {
   path: '\/',
   component: BoxedLayout <\/pre>\n\n\n\n
Now save the file and open up the browser window and open the url: http:\/\/localhost:8080\/<\/a><\/p>\n\n\n\n
If you don’t see the changes, don’t panic. Just run the following command in command prompt or terminal, then try again. You will see the desired result. <\/p>\n\n\n\n
npm run serve <\/pre>\n\n\n\n
Dark Mode<\/h5>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
 To enable dark mode in your app open src->plugins->vuetify.js<\/code> file and set the dark<\/code> value to true as shown below:- <\/p>\n\n\n\n
export default new Vuetify({ 
  theme:{
  themes: {
  light: store.getters.selectedTheme.theme,
  dark: store.getters.selectedTheme.theme
  },
  dark: true \/\/ set true to enable dark mode 
  },
}) <\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    3    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Default Layout This is the default layout of your template, when you download the project from ThemeForest and builds it after the installation procedure, you will find that your template uses this layout by default. You don’t need to change anything to use this layout. Mini Sidebar This is the Mini Sidebar layout for the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/105"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":18,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/105\/revisions\/856"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}