Thank you for Purchasing

Awrora - Digital Business Website Vue Template

Version 3.1.1

• Created : 20 March 2024
• Last Updated : 21 Nov 2024

What is Awrora?

Template Feature

• 8 Homepage Landings and 21 Inner Pages. Built with one of most popular javascript library Vue, Vuetify, Nuxt and Vite.
• Various modern design Machine Learning, Blockchain, Crypto Wallet, Trading Bot, NFT, Metaverse Avatar and Online CV
• Variety of Choices 24 captivating color schemes, 7 versatile header layouts, and 4 distinctive footer layouts.
• Premium designs. Simple and elegant multi color scheme
• Dark/Light Mode. Seamlessly transition between light and dark modes to create the perfect ambiance for your audience.
• RTL Support.Auto RTL adjustment styling @emotion
• Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
• Components and UI modules which reusable and easy to modify.
• Modern Illustration. The most trending design concept, with artwork illustration to increase visitor attractiveness.
• 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.
• High Performance. Generate SSR or SSG to optimize SEO and Online Marketing
• Clean code maintained by eslint.
• And many more...

Folder Structure

    ├── vue
    |   ├── .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
• Unzip the Awrora 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 awrora/vue/
• 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,
  
• Then please navigate to http://localhost:8000

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 .nuxt/
• 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 dist/ inside your project. That's a fully functioning static web app. You can deploy it to any static hosting service, and it will work fine. 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. Everything should be working as usual.

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

  • 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      : 'awrora-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:3000

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 to access it.

Troublehooting

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

Basic Code Structure

Folder structure

└── awrora
    ├── vue
    |   ├── .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.js

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