Thank you for Purchasing

Awrora - Vue JS Landing Page Collection

Version 2.0.0

• Created : 17 March 2021
• Latest Update : 27 Aug 2023

What is Awrora?

Template Feature

• 11 landing page templates. Built with one of most popular javascript library Vue 3, Vuetify (Material Design) and Nuxt.JS.
• Including HTML version. Built with jQuery, Bootstrap, MaterializeCSS (Material Design) and Pug.js for HTML template engine.
• Various modern design Agency, Cloud, Cryptocurrency, Education, Medical, Marketing, Fintech, Product-Sales, Saas, Saas2 and Social Apps.
• Premium designs. Simple and elegant multi color scheme
• More Variant Components. This template including 7 Header type and 4 Footer type, plus Scroll Page Navigator and Chat Panel.
• Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
• Modern Illustration. The most trending design concept, with artwork illustration to increase visitor attractiveness.
• RTL Support. RTL adjustment styling with rtl-saas.
• Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, and Português.
• 100+ section components and UI modules which reusable and easy to modify.
• 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...

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
• 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 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
  Cloud Theme	8002	http://localhost:8002
  Cryptocurrency Theme	8003	http://localhost:8003
  Education Theme	8004	http://localhost:8004
  Finance Theme	8005	http://localhost:8005
  Marketing Theme	8006	http://localhost:8006
  Medical Theme	8007	http://localhost:8007
  Product Sales Theme	8008	http://localhost:8008
  Saas	8009	http://localhost:8009
  Saas2	8010	http://localhost:8010
  Social Apps	8011	http://localhost:8011

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:8001
• 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 /dist directory

serve -p 8080
                        

Now you can access your static app in http://localhost:8080. 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

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