Thank you for Purchasing



Awrora - Vue JS Landing Page Collection

Version 1.0.3


  • Created : 17 March 2021
  • Latest Update : 26 Jul 2021

What is Awrora?


banner

Say Hello to Awrora - Vue JS Landing Page Collection. Designed to be clean, simple and elegant. Built with Vue, Nuxt Js, Vuetify, and Sketch files included. Your site will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.

Explore all Awrora possibilities with 24 colors schemes, 7 header layouts, 4 Footer layouts, dark-light mode and 2D or 3D illustration artwork. Wait... that’s not all - this template also has RTL support and translation ready with 6 languages. That's all very authentic and innovative designs.

What's Inside?
This template contain 11 templates + starter-project. Designed for multipurpose industries including Agency, Cloud, Cryptocurrency, Education, Medical, Marketing, Fintech, Product-Sales, Saas, Saas2 and Social Apps. Each template has been thoroughly researched and features carefully considered design concepts, with a myriad of business types covered. Try to visit the demo and get convinced!

Template Feature


Vue + Nuxt JS version

  • 11 landing page templates. Built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR
  • 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.
  • 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.
  • Support mono repo . Modern architecture to managing modules in multiple project.
  • 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]
    |   ├── assets
    │   ├── components
    │   ├── config
    │   ├── layouts
    │   ├── middleware
    │   ├── pages
    │   ├── plugin
    │   ├── server
    │   ├── static
    │   ├── store
    │   ├── app.html
    │   ├── nuxt.config.js
    │   ├── package.json
    │   ├── package-lock.json
    │   ├── README.md
    │   ├── youtube.js
                        

Installation and Running App


To begin installation please follow this guide bellow:

  • 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.
    process
  • For installation by use lerna, please check this link Installation using lerna
  • Run App
    After build installation complete, then run the app.
    npm run dev
    The process might take a moment.
    process
    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

Installation With Lerna

Lerna is A tool for managing JavaScript projects with multiple packages. This template has 10 packages(projects) inside packages/ folder. So to install them at once you can use lerna. See full docs of lerna here https://github.com/lerna/lerna. Here's the installation guide:

  • Let's start by installing Lerna globally with npm:
    npm install --global lerna
  • Go to your root project (where you've unzipped the product)
  • Then install all packages
    lerna bootstrap
    Note: This process will take some minutes, because there's lot of modules to be installed. If got stuck for this step. Please install the packages(projects) one by one by use npm install instead.

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/ process
  • Then start the app
    npm start
  • Then navigate to http://localhost:8001
  • Node: 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',
          script    : './node_modules/nuxt-start/bin/nuxt-start.js',
          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 NOW

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 now --prod 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

  • if got warning like this :
    
    npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
            
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • if got error node-gyp like this :
    
    No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
    gyp ERR! configure error 
    gyp ERR! stack Error: `gyp` failed with exit code: 1
            

    That because you need to install X Code or Command Line Tools for X Code.

  • You can install X Code from AppStore or from https://developer.apple.com/download/more/

    Or you can install via terminal

    xcode-select --install
  • If you don't want to install X Code at all, you can install by using Yarn to avoid no-gyp error. See the yarn official site https://classic.yarnpkg.com/en/docs/install
    yarn install
  • npm failed to install time with 'make' not found error
    
    gyp ERR! stack Error: not found: make
            
  • If it's Ubuntu you'll need to install the build-essential package:
    $ sudo apt-get install build-essential
    .
    Then try to install the package again npm install
  • If you get error messages when start project npm run dev like this
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
            
  • It mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
  • Please install node-sass manually by npm install node-sass --save
  • Try to start project again npm start
  • You will get this warning message if not use HTTPS
    A cookie associated with a resource at http://doubleclick.net/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
            
    Here's the guide to setup HTTPS with NuxtJS:


Basic Code Structure


Folder structure

project-theme                                                                          
|   ├── assets
│   ├── components
│   ├── config
│   ├── layouts
│   ├── middleware
│   ├── pages
│   ├── plugin
│   ├── server                                                                             
│   ├───static                                                                              
│   │   ├───favicons                                                                        
│   │   ├───images                                                                          
│   │   ├───locales                                                                       
│   │   └───text                                                                            
│   ├── store
│   ├── app.html
│   ├── nuxt.config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── README.md
│   ├── youtube.js                                                                           
                        

Code preview



Landing Page

Landing page structure /pages/index.vue

code

Header

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

code2

Document body

/app.html

code2


Directory Alias

Name Alias Directory Sample Use
UI Components ~/components /components import Header from '~/components/Header'
Images ~/static/images static/images import imgAPI from '~/static/images/imgAPI'
Dummy text and link ~/static/text static/text import brand from '~/static/text/brand'
Component Style Overider ~/assets/vendors /assets/vendors import '~/assets/vendors/animate.css'
And any your files ~/yourfolder /yourfolder import '~/yourfolder/file';



Template Architecture

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

Starter Project


This source code made for you who want build app from scratch without without being distracted from innate feature. In other word it's an initial(empty) project with built in configuration setup.

  • 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

    process
    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


Follow this guide bellow to modify user interface, branding identity and default language.

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 brand from '~/static/text/brand'
    
    export default {
      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 '~/static/text/brand'
    import MyComponent from '../components/MyComponent
    
    export default {
      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


Eslint is disabled by default. You can enable it to keep your code consistent and avoiding bug.
NOTE: By enable eslint the running app process at beginning will slower.

Just follow this step to enable eslint
  • Go to /nuxt.config.js
  • Just uncomment this code bellow
    module.exports = {
      /*
      ** Build configuration
      */
      build: {
        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
          // if (ctx.isDev && ctx.isClient) {
            // config.module.rules.push({
              // enforce: "pre",
              // test: /\.(js|vue)$/,
              // loader: "eslint-loader",
              // exclude: /([node_modules, static])/,
              // options: {
              //   fix: false
              // }
            // });
          // }
        }
      }
    }
    
  • Then should become like this
    module.exports = {
      /*
      ** Build configuration
      */
      build: {
        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
          if (ctx.isDev && ctx.isClient) {
            config.module.rules.push({
              enforce: "pre",
              test: /\.(js|vue)$/,
              loader: "eslint-loader",
              exclude: /([node_modules, static])/,
              options: {
                fix: false
              }
            });
          }
        }
      }
    }
    
  • 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

External Reference

Here's some external reference of library that we used


Fonts Used




roboto font

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

  • Please make sure IonIcons already embeded in components/head.js.
    If not just embed this inside head tag
    <head>
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    </head>
  • Connect to internet
  • The sample usage
    
    <span class="ion-ios-world-outline" />  
                              
  • Here's the ionicons cheatsheet https://ionicons.com/v2/cheatsheet.html


  • Sources and Credit


    Fonts :
    Roboto, Robot Condensed, Lato, Open Sans, Montserrat

    Preview Images Used
    Unsplash
    Pixabay
    randomuser.me

    Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


    Credits
    Name Repository License
    @nuxtjs/vuetify https://www.npmjs.com/package/@nuxtjs/vuetify MIT
    animate.css https://www.npmjs.com/package/animate.css MIT
    babel https://www.npmjs.com/package/Babel None
    eslint https://www.npmjs.com/package/eslint MIT
    express https://github.com/expressjs/express MIT
    node-sass https://www.npmjs.com/package/node-sass MIT
    nuxt https://www.npmjs.com/package/nuxt MIT
    nuxt-gmaps https://www.npmjs.com/package/nuxt-gmaps MIT
    nuxt-i18n https://www.npmjs.com/package/nuxt-i18n MIT
    nuxt-mq https://www.npmjs.com/package/nuxt-mq MIT
    rtl-sass https://www.npmjs.com/package/rtl-sass ISC
    vue-parallaxy https://www.npmjs.com/package/vue-parallaxy MIT
    vue-scrollactive https://www.npmjs.com/package/vue-scrollactive MIT
    vue-slick https://www.npmjs.com/package/vue-slick ISC
    vue-wow https://www.npmjs.com/package/vue-wow MIT
    vue-youtube https://www.npmjs.com/package/vue-youtube MIT
    vuetify https://www.npmjs.com/package/vuetify MIT
    webpack https://github.com/webpack/webpack MIT

    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

    Version 1.0.3 – 26 Jul, 2021
    Adjust Sass version
    Files changes:
    packages/[theme-name]/package.json
    Fixed Sketch files spacing, alignment, typography and copyright year
    Files changes:
    *.sketch
    Adjust typography styles for title in sidebar filter.
    Files changes:
    packages/[theme-name]/components/Filter/Filter.vue
    packages/[theme-name]/components/Filter/filter.scss
    Fixed chat room style if contains wrapped text
    Files changes:
    packages/[theme-name]/components/Chat/chat-style.scss
    Version 1.0.2 – 9 May, 2021
    Adjust Marketing Theme banner height
    Files changes:
    packages/marketing-theme/components/Home/BannerSlider/BannerSlider.vue
    packages/marketing-theme/components/Home/BannerSlider/banner-styles.scss
    Update some dependencies version
    Files changes:
    packages/[theme-name]/package.json
    Fixed search banner z-index
    Files changes:
    packages/saas-theme/components/Filter/filter.scss
    packages/saas2-theme/components/Filter/filter.scss
    packages/social-apps-theme/components/Filter/filter.scss
    Fixed imported component name
    Files changes:
    packages/[theme-name]/components/Home/Corner/Corner.vue
    Change product-sales theme to retail
    Files changes:
    packages/retail
    Adjust sitemap and blog footer URL
    Files changes:
    packages/[theme-name]/components/Footer/Blog.vue
    packages/[theme-name]/components/Footer/SiteMap.vue
    Version 1.0.1 – 19 Mar, 2021
    Fixed @babel/preset-env library/utils issue
    Files changes:
    [all-theme]/package.json
    Fixed image url in Cryto and Medical theme
    Files changes:
    packages/crypto-theme/components/Home/TopCoin/TopCoin.vue
    packages/medical-theme/components/Home/BannerSlider/BannerSlider.vue
    packages/medical-theme/components/Home/Facilities/Facilities.vue
    packages/medical-theme/components/Home/Speciality/Speciality.vue
    packages/medical-theme/components/Home/Testimonials/Testimonials.vue
    Version 1.0 – 17 Mar, 2021
    Awrora released