Back to Main Docs © Copyright 2022

# 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 2020',
          logoText: 'Veluxi Agency',
          projectName: 'Agency Theme',
          url: 'veluxi.ux-maestro.com/agency',
          img: '/public/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

# 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 `/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

  1. 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

  2. You can check the available local code here https://github.com/ladjs/i18n-locales
  3. 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`.