Thank you for Purchasing

Veluxi - Vue JS Landing Page Collection

Version 3.2.1

• Created : 16 March 2020
• Latest Update : 19 Nov 2024

What is Veluxi?

Template Feature

Vue + Nuxt JS version

• 14 landing page templates. Built with one of most popular javascript library Vue 3, Vuetify (Material Design) and Nuxt.JS with SSR
• Various modern design Agency, Architect, Cryptocurrency, Fashion, Hosting, Mobile, Portfolio and Saas
• Premium designs. Simple and elegant multi color scheme
• Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
• RTL Support. RTL adjustment styling with rtl-saas.
• Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
• 100+ section components and UI modules which reusable and easy to modify.
• Interactive and Attractive show. Stunning animation, parallax, scrolling effects, even video background will make your site wilder
• Next Generation JavaScript written in ES6
• Responsive design Based on standard 12 Grid System
• Starter Project. Build app from scratch without without being distracted from innate feature.
• Clean code maintained by eslint.
• Fully vector icons and font icons.
• And many more...

Sketch Version

• 11 elaborate high quality designs
• Including Dark and Light version
• Based on standard 12 Grid System
• Fully Vector Icons
• Easy to edit and well organized layers, and goups.

Folder Structure

└── packages
    ├── [theme-name]
    |   ├── .eslintrc.js
    |   ├── .gitignore
    |   ├── .npmrc
    |   ├── assets
    │   ├── components
    │   ├── composable
    │   ├── config
    │   ├── error.vue
    │   ├── lang
    │   ├── layouts
    │   ├── nuxt.config.ts
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── pages
    │   ├── plugin
    │   ├── preview.jpg
    │   ├── public
    │   ├── README.md
    │   ├── tsconfig.json
                        

Installation and Running App

• Connect to the internet
• Install NodeJs from NodeJs Official Page *We recommend to use LTS version, which recommended for most users
• Unzip the Veluxi file to a folder in your computer
• Open Terminal
• Go to your file project (where you've unzipped the product)
• Go to packages and choose a template. Example packages/agency/
• Install Modules
  Install module dependencies by run this script in terminal

  npm install

  If You're system:

  • Mac OS 10.15 Catalina
  • And Doesn't have X Code or Command Line Tools installed
  • And Using Node version 14.xx or greater

  
  

  Please install by using yarn. To avoid no-gyp error. See the yarn official site https://classic.yarnpkg.com/en/docs/install

  yarn install

  It will download some necessary dependencies, and just wait until finish.
  
  
• Run App
  After build installation complete, then run the app.

  npm run dev

  The process might take a moment.
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• For agency template please navigate to http://localhost:8001
• Here's the port list for each template

  Template	Port	Landing Page URL
  Starter Project	8000	http://localhost:8000
  Agency Theme	8001	http://localhost:8001
  Architect Theme	8002	http://localhost:8002
  Cryptocurrency Theme	8003	http://localhost:8003
  Fashion Theme	8004	http://localhost:8004
  Hosting Theme	8005	http://localhost:8005
  Mobile Apps Theme	8006	http://localhost:8006
  Portfolio Theme	8007	http://localhost:8007
  Saas Theme	8008	http://localhost:8008
  Medical Theme	8009	http://localhost:8009
  Movie Theme	8010	http://localhost:8010
  Education Theme	8011	http://localhost:8011
  Profile 1 Theme	8012	http://localhost:8012
  Profile 2 Theme	8013	http://localhost:8013
  Profile 3 Theme	8014	http://localhost:8014
  Showcase	8015	http://localhost:8015

Build App

Build project

• Here'a bellow an example for agency-theme. You can use the same steps to other packages(projects)
• First you need to build the production assets first

  npm run build

  It usually take longer time than development to generate and compress production code. The generated files will be placed in .output/
• Then start the app

  npm run preview

• Then navigate to http://localhost:3000
• Note: In Windows system you need to install win-node-env, because setting NODE_ENV=production before command babel doesn't work on Windows. Here's the packages https://www.npmjs.com/package/win-node-env

Build Static HTML

Run the following commands:

 npm run generate
                        

Now you can see the exported HTML content on a directory called .output/public inside your project. That's a fully functioning static web app. You can deploy it to any static hosting service. But before we do that, we need to test it out locally. In order to test the app, install the following serve NPM module globally:

npm install -g serve
                        

After you've installed serve, run following commands from /.output/public directory

serve -p 1234
                        

Now you can access your static app in http://localhost:1234.

Deployment

Deploy to server

• First you have to clone/copy the project in your hosting/cloud server.
• If you haven't install the dependencies before, please run npm install
• Then run npm run build
• Run app in background process

  To run it in background you may try PM2 pm2.keymetrics.io and https://www.npmjs.com/package/pm2. PM2 is a daemon process manager that will help you manage and keep your application online 24/7

  • Install the pm2 globally

    npm install pm2@latest -g

  • Go to project folder i.e packages/agency
  • Create ecosystem file

    pm2 ecosystem

    It will generate ecosystem.config.js in your root project
  • Open ecosystem.config.js. Then Change the script target to ./index.js like this:

                                      
    module.exports = {
      apps : [{
        name      : 'agency-vue',
        port      : '3000',
        exec_mode : 'cluster',
        instances : 'max',
        script    : './.output/server/index.mjs',
        env: {
          NODE_ENV: 'development'
        },
        env_production : {
          NODE_ENV: 'production'
        }
      }],
    
      deploy : {
        production : {
          user : 'node',
          host : '212.83.163.1',
          ref  : 'origin/master',
          repo : 'git@github.com:repo.git',
          path : '/var/www/production',
          'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
        }
      }
    };
    
                                      
                                    

  • Run the project

    pm2 start ecosystem.config.js --env production

  • Then navigate to http://localhost:3001

Deploy to Vercel

Deploy your website quickly, without having to manually configure DNS, SSL, CDN or hosting. Integrate with your favorite tools, and bring your entire team of developers and designers closer together.

• Go to your projects, then npm run generate. The static HTML will be generated in dist/ folder
• Next just run vercel to delploy.
• Wait until process finish. Once finish you will get live url yo access it.

Troublehooting

Here's most common error problem when installation and first setup project

Basic Code Structure

Folder structure

└── packages
    ├── [theme-name]
    |   ├── .eslintrc.js
    |   ├── .gitignore
    |   ├── .npmrc
    |   ├── assets
    │   ├── components
    │   ├── composable
    │   ├── config
    │   ├── error.vue
    │   ├── lang
    │   ├── layouts
    │   ├── nuxt.config.ts
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── pages
    │   ├── plugin
    │   ├── preview.jpg
    │   ├── public
    │   ├── README.md
    │   ├── tsconfig.json                                                                        
                        

Code preview

• Landing Page
• Header
• Document Body

Landing Page

Landing page structure /pages/index.vue

Header

You can put google analytics, font icon, embeded fonts, etc here. /nuxt.config.ts

Document body

/app.html

Directory Alias

Template Architecture

This is template architecture in diagram visualization. Click diagram or full screen button to show in new tab with full screen

Starter Project

• You can go through to /packages/starter-project/ folder
• Connect to the internet
• Open Terminal
• The next installation process are same like was described above. Installation Step
• Install module dependencies by run this script in terminal

  npm install

  It will download some necessary dependencies, it could take some minutes, just wait until finish.
• Run App
  

  npm run dev

  
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• Navigate to http://localhost:8000
• After this you can can start develop your app with this initial project. And will bo more suitable when use other ready-template as a reference

UI and Languages

Create New Page

• In example we want to create an "About" page by adding the following content to pages/about.vue

• 
  <template>
    <div>
      <h2>This is the about page</h2>
    </div>
  </template>
  
  <script>
  import { defineNuxtComponent } from '#app';
  import brand from '@/assets/text/brand'
  
  export default defineNuxtComponent({
    head() {
      return {
        title: brand.starter.name + ' - About Page'
      }
    }
  })
  </script>
  
                                

• Then we can access that page with http://localhost:8000/about

Create New Component

• Go to /components/
• Create new folder ex: MyComponent. The name must in capitalize
• Create new vue file inside that folder with same name as folder MyComponent, that is MyComponent.vue. The name must in capitalize
• Create new js file inside that folder index.js. Then export the vue componet.

  export { default } from './MyComponent'

• Inside the file create a simple Vue template ex:
  

  // file: /components/MyComponent/MyComponent.vue
  
  <template>
    <div>
      <h1>Hello World</h1>
    </div>
  </template>
  
  

• Open a target page where you want use it. Ex: Open /pages/about.vue. (Example page that we've made in previous section)
• Import component form component folder
  

  import MyComponent from '@/components/MyComponent'

• Then register it in components script export default {

  
    components: {
      MyComponent
    }
  }
                                

• Then use it inside template
  

  <template>
    <div>
      <h2>This is the about page</h2>
      <my-component />
    </div>
  </template>
                              

• Here's complete code
  

  // file: /page/about.vue
  <template>
    <div>
      <h2>This is the about page</h2>
      <my-component />
    </div>
  </template>
  
  <script>
  import brand from '@/assets/text/brand'
  import MyComponent from '@/components/MyComponent
  import { defineNuxtComponent } from '#app';
  
  export default defineNuxtComponent({
    components: {
      MyComponent
    },
    head() {
      return {
        title: brand.starter.name + ' - About Page'
      }
    }
  });
  </script>
  

• Then you can check the result at http://localhost:8000/about

Clean Code with Eslint

• Go to /nuxt.config.ts
• Just uncomment this code bellow

  export default defineNuxtConfig({
    vite: {
      plugins: [
        // eslintPlugin(),
      ]
    },
  })
  

• Then should become like this

  export default defineNuxtConfig({
    vite: {
      plugins: [
        eslintPlugin(),
      ]
    },
  })
  

• Run the project npm run dev.
  You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  More about elint https://eslint.org/docs/user-guide/getting-started

Icons Used

Material Font Icons

• Please make sure Google Material Icons already embeded in nuxt.config.ts in head.link:
  If not just embed this inside head tag

  
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }, 
    ]
  }
  

• Connect to internet
• Then use it inside Vue templates. Example for use setting icon

  <v-icon>mdi-settings</v-icon>

• Here's the cheatsheet for Material Icon https://cdn.materialdesignicons.com/4.9.95/
• You can get icons form quick search here https://materialdesignicons.com/

IonIcons Font

<head>
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>

<span class="ion-ios-world-outline" />  
                          

Sources and Credit

Online Suport

If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

A product by Ilham Meidi Brata

Change Log