Creating Vue.js Application


I'll show you how to set up a full-stack Vue application with backend including each of the CRUD operations (Create, Read, Update and Delete). AJAX is key to this architecture, so we'll use Axios as the HTTP client.

We'll begin by creating a components to display our Cruds in the directory at VaahCms/Modules/Articles/Vue/pages/contents/

In Articles module:


Config/ Database/ Entities/ Helpers/ Http/ Libraries/ mode_modules/ Providers/ Resources/ Routes/ Tests/ Vue/ ├── layouts/ ├── Backend.vue ├── BackendJs.js ├── partials/ ├── AsideMenu.vue ├── pages/ ├── contents/ ├── Create.vue ├── CreateJs.js ├── Edit.vue ├── EditJs.js ├── List.vue ├── ListJs.js ├── View.vue ├── ViewJs.js ├── partials/ ├── ListLargeView.vue ├── ListLargeViewJs.js ├── ListSmallView.vue ├── ListSmallViewJs.js ├── store/ ├── store.js ├── modules/ ├── contents.js ├── root.js ├── routes/ ├── routes.js ├── config/ ├── middlewarePipeline.js ├── router.js ├── middleware/ ├── GetAssets.js ├── vaahvue/ ├── helpers/ ├── VaahHelper.js ├── app.js composer.json package.json package-lock.json README.md webpack.mix.js

In component, we have used Bulma and Buefy library. This is not compulsory to use these library, you can simply plain html code.

List.vue

copy

List.js

copy

In List.js, we have import two component for showing list.

  • ListLargeView
  • ListSmallView

ListLargeView.vue

copy

ListLargeViewJs.vue

copy

ListSmallView.vue

copy

ListSmallViewJs.vue

copy

Create.vue

copy

CreateJs.vue

copy

View.vue

copy

ViewJs.vue

copy

Edit.vue

copy

EditJs.vue

copy