Installation and Running App

To begin installation please follow this guide bellow:

Connect to the internet
Install NodeJs from NodeJs Official Page
Unzip the file to a folder in your computer
Open Terminal
Go to your file project (where you've unzipped the item)
Install Modules
Install module dependencies by run this script in terminal
```
npm 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,
After finish console will generate url with path localhost:800x. So lease navigate to that url in browser.

Build App

Build project

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:port
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
```
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 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

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 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	@/assets/images	assets/images	`import imgAPI from '@/assets/images/imgAPI'`
Dummy text and link	@/assets/text	assets/text	`import brand from '@/assets/text/brand'`
Component Style Overider	@/assets/scss/vendors	/assets/vendors	`import '@/assets/scss/vendors/animate.css'`
And any your files	@/yourfolder	/yourfolder	`import '@/yourfolder/file';`

UI and Languages

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

Brand/Project Name

Change Layout(RTL) and Theme

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:port/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.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

External Reference

Here's some external reference of library that we used

Nuxt.js https://nuxt.com/
Vuetify https://vuetifyjs.com/en/
nuxt-i18n https://i18n.nuxtjs.org/
SCSS/SASS https://sass-lang.com/documentation
Youtube Iframe API https://developers.google.com/youtube/iframe_api_reference
Carousel https://splidejs.com/integration/vue-splide/
And many more. Check the all dependencies and the repository here

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 :
Lato

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