Airframe
www.webkom.co Twitter

"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!

"Airframe Admin" - Vue.js Version Details

This Airframe project is based on the Nuxt.js framework which allows to build SSR and static projects. You can find more information about development in the Official Documentation .

Initial Configuration:

You need to have NodeJs (>= 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.

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:

<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

Previous"Airframe Admin" (MVC.Net)

Last updated