Brand/Project Name

Open /assets/text/brand.js

Here's bellow the available brand attribute


const brand = {
  agency: {
    name: 'Agency',
    desc: 'Veluxi Agency - Vue Single Landing Page Template',
    prefix: 'veluxi',
    footerText: 'Veluxi Theme - All Rights Reserved 2023',
    logoText: 'Veluxi Agency',
    projectName: 'Agency Theme',
    url: 'veluxi.ux-maestro.com/agency',
    img: '/static/images/agency-logo.png',
    notifMsg:
      'Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula.'
  }
}

export default brand

Those attribute will affect in HTML ‹head› content and other branding name

For Desktop: /components/Header/Header.vue
For Mobile: /components/Header/MobileMenu.vue
Those components get the list data from /components/Header/menu.js
Important: The menu name must be same as page name.
Once create a new page, then want to add in navigation components (header and mobile sidebar), you can put the page in /components/Header/menu.js.
Here's bellow the diagram routing menu to be displayed in UI Component

Change Layout(RTL) and Theme

This template has 20 Themes with dark/light appearance. And also support for RTL direction. You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

Open /config/theme.js
Open the available theme list /config/theme.txt
Then change the theme value. For theme color, since nuxt.js cannot import external file in the config, so please pick and copy manually one of theme value from /config/theme.txt to /config/vuetify.options.js in const palette

Example theme to pick:

greenLeaf: {
  primary: colors.green.base, // primary main
  primarylight: colors.green.lighten4, // primary light
  primarydark: colors.green.darken4, // primary dark
  secondary: colors.blueGrey.base, // secondary main
  secondarylight: colors.blueGrey.lighten4, // secondary light
  secondarydark: colors.blueGrey.darken3, // secondary dark
  anchor: colors.green.base // link
}

And here's the available themes api:

Key	Type	Available Value	Example
`theme.themes:`	Object	`'...palette.oceanBlue'`, `'...palette.greenLeaf'`, `'...palette.greyscale'`, `'...palette.cloud'`, `'...palette.violet'`, etc	`theme = { ...palette.oceanBlue }`
`theme.dark:`	Boolean	`true`, `false`	`dark: true`
`rtl:`	Boolean	`true`, `false`	`rtl: true`

Here's the complete code, for dark mode

// file: plugins/vuetify.js
// Styles
import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';

// Composables
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import { defineNuxtPlugin } from '#app';

import theme from '../config/theme';

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
    ssr: true,
    theme: {
      options: { customProperties: true },
      defaultTheme: 'dark',
      themes: {
        light: {
          colors: {
            ...theme,
          },
        },
        dark: {
          colors: {
            ...theme,
          },
        },
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

!IMPORTANT

If you change the palette const, don't forget to update this following files as well
** Crytpo Theme: /crypto-theme/components/GradientDeco/GradientDeco.vue
** Saas Theme: /saas-theme/components/Testimonials/Testimonials.vue
** Hosting Theme: /hosting-theme/components/Banner/Banner.vue

Make sure the const palette has same value as vuetify.options const palette

Youtube Config

This template us Vue Youtube a simple vue component acting as a thin layer over the YouTube IFrame Player API. To use this feature we recommend to use https in production. If not there will be some warnings in browser console related cookies and security.

You can disable this feature by open config/youtube.js then set set use: false.

Set Language

To set default language
1. Open /nuxt.config.ts
2. change defaultLocale: 'en' to other initial locale i.e. id for Bahasa Indonesia
3. And also for vueI18n: { fallbackLocale: 'en' } to other fallback locale i.e. id for Bahasa Indonesia
4. For arabic with RTL layout, please add dir: 'rtl' in app.head.htmlAttrs: { lang: 'ar', dir: 'rtl' }
5. Then open composables/uiTheme.js
6. Set useRtl to true export const useRtl = () => (useState('rtl', () => true));

Add new language

By default, nuxt-i18n expects your translations to be organised as such by create new language JS library in /static/lang/[localCode]/
```
    └── lang
        ├── en-US.json
        └── de-DE.json
```
You can check the available local code here https://github.com/ladjs/i18n-locales

Then register it in /lang/languages.js


export default [
  {
    code: 'de',
    iso: 'de-DE',
    name: 'Deutch',
    file: 'de-DE.json',
    dir: 'ltr'
  },
  {
    code: 'en',
    iso: 'eng-US',
    name: 'English',
    file: 'en-US.json',
    dir: 'ltr'
  }
]

Put the messages to the Vue Components
1. Pick one of sample Components with cointaining text, i.e /componens/Footer.vue
2. Basically the message return is String. And next step is replace/add every string in components
3. Add a translated text inside components
```
                                  
<p>
  {{ $t('agencyLanding.footer_paragraph') }}
</p>
                                  
                                
```
4. Then run the server npm run dev.

UI and Languages

Brand/Project Name

Navigation Menu

Change Layout(RTL) and Theme

Youtube Config

Set Language

To set default language

Add new language

Put the messages to the Vue Components