Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Update Default Layout Config in Vue


I have a Vue app using v8.1.0 demo1
Now I want to change the layout theme to be like demo 7

I copied the config from v8.2.1 demo 7 and pasted it in my app - Default Layout Config, but it didn't work!

here is my old config:

const config: LayoutConfigTypes = {
themeName: "HRO",
themeVersion: "8.1.0",
demo: "demo1",
main: {
type: "default",
primaryColor: "#009EF7",
logo: {
dark: "media/logos/default-dark.svg",
light: "media/logos/default.svg",
},
},
illustrations: {
set: "sketchy-1",
},
loader: {
logo: "media/logos/default-dark.svg",
display: true,
type: "default",
},
scrollTop: {
display: true,
},
header: {
display: true,
menuIcon: "font",
width: "fluid",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
toolbar: {
display: true,
width: "fluid",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
aside: {
display: true,
theme: "dark",
fixed: true,
menuIcon: "svg",
minimized: false,
minimize: true,
hoverable: true,
},
content: {
width: "fixed",
},
footer: {
width: "fluid",
},
};


and here is what i copied:

const config: LayoutConfigTypes = {
general: {
mode: "system",
iconsType: "duotone",
},
main: {
type: "default",
primaryColor: "#009EF7",
logo: {
dark: "media/logos/default-dark.svg",
light: "media/logos/default.svg",
},
},
illustrations: {
set: "sketchy-1",
},
scrollTop: {
display: true,
},
header: {
display: true,
menuIcon: "keenthemes",
width: "fixed",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
toolbar: {
display: true,
width: "fixed",
fixed: {
desktop: true,
tabletAndMobile: true,
},
},
pageTitle: {
display: true,
breadcrumb: true,
direction: "column",
},
aside: {
display: true,
secondaryDisplay: true,
theme: "dark",
fixed: true,
menuIcon: "keenthemes",
minimized: false,
minimize: true,
hoverable: true,
},
content: {
width: "fixed",
},
footer: {
width: "fixed",
},
};

can you help me, please?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Thank you for reaching out to us.

The layout configuration structure varies across demos. Copying and pasting a configuration from one demo to another might lead to errors or disrupt the layout.

Do you wish to stick with the demo1 style, or would you like to completely switch to demo7?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris

Thanks for your replay

I want to switch completely to demo7, because I want to change the sidebar style.



Hi,

To switch to a different demo you can follow the steps below:


  1. Update layout styles in src/assets/sass/layout.

  2. Update layout configuration file src/layouts/default-layout/config/DefaultLayoutConfig.ts.

  3. Update layout components in src/layouts/default-layout/components

  4. Run and open the app in the browser and clear localStorage to delete previously saved layout configuration.

  5. Page content is the same in all demos.



Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(