The Speed and Performance of Amber with the ease of development in Vue

Amber with Vue.js

The goal of the Amber with Vue.js recipe is to quickly provide a full stack solution that takes full advantages of the best parts of development using a frontend framework (in the way it was designed to be used), with a powerful backend API.

The intention is to break away from the traditional Rails-y MVC model, without requiring developers to write completely separate frontend/backend codebases.

Creating a Project

To create your project with the Amber with Vue.js recipe, you will need to run the following command:

amber new <your app name> -r progressive-amber/vue-recipe

You may also want to specify your database (default is Postgres) by adding the -d tag:

amber new <your app name> -r progressive-amber/vue-recipe -d <pg | mysql | sqlite>

Once your app has been created, you will want to run

cd <your app name>
amber w

Your application will be running on localhost:9090.

File Structure

With this recipe, we have modularized the file structure to isolate your frontend code in Vue.js from your Amber API.

|- bin
|- config
|- db
|- frontend-vue   // Vue.js file tree structure.
    |- src
        |- assets
        |- components
            |- HelloWorld.vue
        |- App.vue
    |- main.js

|- lib
|- public
|- spec
|- src
    |- controllers
        |- application_controller.cr    // Render method for root is in application_controller.cr

    |- locales
    |- models
    |- views
        |- layouts
        |- application
            |- application.slang   // Location of the root #app <div> Vue will render to.

CLI

The amber-vue-cli is a tool for scaffolding APIs, and components. To use the CLI, you will need to install the tool with npm install. You will then need to run:

npm run vue-tools

When you run the CLI, you should see the following:

? select generator
> componenet  // vue component generator
> scaffold  // **currently doesn't have full functionality**
> api  // will generate a full CRUD API in amber

Please feel free to also reference the amber-vue-cli docs!

Documentation

For any questions specific to the Vue.js or Amber frameworks, please feel free to refer to their excellent documentation below:

• Vue.js
• Amber

DevTools

When developing Vue.js applications, it is highly recommended to use the Vue.js devtools. Currently only FireFox and Chrome have support for the devtools extension. Their links are provided below:

• FireFox: devtools
• Chrome: devtools

You can also use the standalone Electron app vue-remote-devtools for any enviornment:

• Remote: devtools

License

This project is licensed under the MIT License - see the LICENSE file for details