> For the complete documentation index, see [llms.txt](https://webkom.gitbook.io/spin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webkom.gitbook.io/spin/airframe/airframe-vue.js/documentation-vue.js.md).

# "Airframe Admin" (Vue.js)

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via: tomasz.owczarczyk\@me.com. Thanks so much!

{% hint style="info" %}
**"Airframe Admin" - Vue.js Version Details**

* Live Preview: <http://dashboards.webkom.co/vue/airframe/>
* Live Docs: <https://webkom.gitbook.io/spin/v/airframe/airframe-vue.js/documentation-vue.js>
* Created: 12 Sep. 2019
* By: Tomasz Owczarczyk
* Email: <tomasz.owczarczyk@me.com>
  {% endhint %}

This Airframe project is based on the [Nuxt.js](https://nuxtjs.org) framework which allows to build SSR and static projects. You can find more information about development in the [Official Documentation](https://nuxtjs.org/guide) .

### Initial Configuration:

You need to have [NodeJs](https://nodejs.org/en/) (>= 10.0.0) installed on your local machine, before attempting to run a dev environment.

1. Extract contents of the package to your local machine.
2. Using the Terminal navigate to the extracted contents.
3. Run `npm install`.

Make sure you have a file called `.npmrc` in the extracted directory. Those files are typically hidden in Unix based systems.

### Development

To start the development environment type `npm start` in the console. This will start a development server with hot reloading enabled.

### Production

You can use a shell script included with the package. If you are using a Unix based system run `./build-dist.sh` from the terminal, and you will have a ready to deploy package in the `/dist` directory.

If you can't use the shell script you need to prepare the package manually: 1. Run `npm run build` 2. Copy those contents to the target machine

* `.nuxt`
* `static`
* `package.json`
* `.npmrc`
  1. Run `npm install` on the server where you copied the above contents.
  2. You can now start the app by running `npm start-prod`

### Build Customization

You can customize the build process of Nuxt by defining configuration based on [this guide](https://nuxtjs.org/api/configuration-build).

### Project Details

Some points of interest about the project project structure:

* `assets` - images and styles which can be imported via Webpack inside the app
* `components` - global application components should be here
* `includes` - components which are used only in routes
* `layouts` - you can define multiple Layout Components here
* `pages` - Page Components binded automatically to specific routes
* `plugins` - global directives, filters etc. should go here
* `static` - assets which won't be parsed by Webpack and will be served directly

#### Defining Routes

You just need to add a new Vue component to the `pages` directory and it will be bound automatically to a specific route. For example Component file at `/pages/example-page.vue` will be available at `/example-page` url etc. Please refer to Nuxt documentation for more informatio.

#### Custom Layouts

Sometimes you might want to display additional content in the Navbar or Sidebar. To do this. you should add a custom Layout in the `layouts` directory with the desired content, and attach it to a specific Page Component afterwards. You can do it like this:

```markup
<script>
export default {
    layout: 'name-of-my-custom-layout'
}
</script>
```

### Theming

You can set the color scheme for the sidebar and navbar by providing `themeStyle` and `themeColor` props to the `<layout>` component.

Possible `themeStyle` values:

* light
* dark
* color

Possible `themeColor` values:

* primary
* success
* info
* warning
* danger
* indigo
* purple
* pink
* yellow

## Credits and Sources

All of the listed dependencies are being kept **up to date**.

* *@nuxtjs/axios 5.X.X*
* *ag-grid-vue 21.X.X*
* *bootstrap-vue 2.X.X*
* *font-awesome 4.7.0*
* *holderjs 2.X.X*
* *lodash 4.X.X*
* *moment 2.X.X*
* *nuxt 2.X.X*
* *query-string 6.X.X*
* *vue-fragment 1.X.X*
*