├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .postcssrc
├── README.md
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── DataList.js
    │   ├── DataModel.js
    │   ├── PostList.vue
    │   └── mixins
    │   │   └── query.js
    └── main.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "@vue/app"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | end_of_line = lf
 8 | indent_size = 2
 9 | indent_style = space
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | trim_trailing_whitespace = false
15 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "root": true,
3 |   "extends": [
4 |     "@avalanche/eslint-config",
5 |     "plugin:vue/recommended"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Numerous always-ignore extensions
 2 | *.diff
 3 | *.err
 4 | *.log
 5 | *.orig
 6 | *.rej
 7 | *.swo
 8 | *.swp
 9 | *.tgz
10 | *.vi
11 | *.zip
12 | *~
13 | 
14 | # OS or Editor folders
15 | ._*
16 | .cache
17 | .DS_Store
18 | .idea
19 | .project
20 | .settings
21 | .tmproj
22 | *.esproj
23 | *.sublime-project
24 | *.sublime-workspace
25 | nbproject
26 | Thumbs.db
27 | 
28 | # Folders to ignore
29 | dist/*
30 | !dist/_redirects
31 | node_modules
32 | 


--------------------------------------------------------------------------------
/.postcssrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": {
3 |     "autoprefixer": {}
4 |   }
5 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Building Renderless Components to Handle CRUD Operations in Vue.js
 2 | 
 3 | [![Patreon](https://img.shields.io/badge/patreon-donate-blue.svg)](https://www.patreon.com/maoberlehner)
 4 | [![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/maoberlehner)
 5 | 
 6 | This is an example project for the following article: [Building Renderless Components to Handle CRUD Operations in Vue](https://markus.oberlehner.net/blog/building-renderless-components-to-handle-crud-operations-in-vue/)
 7 | 
 8 | ## Build Setup
 9 | 
10 | ```bash
11 | # Install dependencies.
12 | npm install
13 | 
14 | # Serve with hot reload.
15 | npm run serve
16 | 
17 | # Build for production with minification.
18 | npm run build
19 | ```
20 | 
21 | ## About
22 | 
23 | ### Author
24 | 
25 | Markus Oberlehner  
26 | Website: https://markus.oberlehner.net  
27 | Twitter: https://twitter.com/MaOberlehner  
28 | PayPal.me: https://paypal.me/maoberlehner  
29 | Patreon: https://www.patreon.com/maoberlehner
30 | 
31 | ### License
32 | 
33 | MIT
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "building-renderless-components-to-handle-crud-operations-in-vue",
 3 |   "version": "0.1.0",
 4 |   "author": "Markus Oberlehner",
 5 |   "homepage": "https://github.com/maoberlehner/building-renderless-components-to-handle-crud-operations-in-vue",
 6 |   "license": "MIT",
 7 |   "private": true,
 8 |   "scripts": {
 9 |     "serve": "vue-cli-service serve --open",
10 |     "build": "vue-cli-service build",
11 |     "lint": "vue-cli-service lint"
12 |   },
13 |   "dependencies": {
14 |     "axios": "^0.18.0",
15 |     "vue": "^2.5.16"
16 |   },
17 |   "devDependencies": {
18 |     "@avalanche/eslint-config": "^2.0.0",
19 |     "@vue/cli-plugin-babel": "^3.0.0-beta.10",
20 |     "@vue/cli-plugin-eslint": "^3.0.0-beta.10",
21 |     "@vue/cli-service": "^3.0.0-beta.10",
22 |     "eslint-plugin-import": "^2.12.0",
23 |     "eslint-plugin-vue": "^4.5.0",
24 |     "node-sass": "^4.7.2",
25 |     "sass-loader": "^6.0.6",
26 |     "vue-template-compiler": "^2.5.13"
27 |   },
28 |   "browserslist": [
29 |     "> 1%",
30 |     "last 2 versions",
31 |     "not ie <= 8"
32 |   ]
33 | }
34 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maoberlehner/building-renderless-components-to-handle-crud-operations-in-vue/16aa02ddd7428053d1ec0240081ffda43f4f5ecf/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <title>Building Renderless Components to Handle CRUD Operations in Vue.js</title>
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
10 |   </head>
11 | 
12 |   <body>
13 |     <div id="app"></div>
14 |     <!-- built files will be auto injected -->
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container mx-auto max-w-md p-4">
  3 |     <h1 class="text-center">Vue.js Renderless Components CRUD Components</h1>
  4 | 
  5 |     <data-list
  6 |       :filter="{ userId: userIdFilter }"
  7 |       endpoint="posts"
  8 |     >
  9 |       <div
 10 |         slot-scope="{ data: posts, error, load, loading }"
 11 |         class="mt-8"
 12 |       >
 13 |         <h2>Post list</h2>
 14 |         <span class="block text-grey-darker text-sm mt-4">User</span>
 15 |         <select
 16 |           v-model="userIdFilter"
 17 |           class="shadow border rounded mt-1"
 18 |         >
 19 |           <option value="1">User 1</option>
 20 |           <option value="2">User 2</option>
 21 |           <option value="3">User 3</option>
 22 |         </select>
 23 | 
 24 |         <div class="mt-4">
 25 |           <span v-if="loading">Loading...</span>
 26 |           <div v-else-if="error">Error while fetching data!</div>
 27 |           <post-list
 28 |             v-else
 29 |             :posts="posts"
 30 |             @updated="load"
 31 |           />
 32 |         </div>
 33 |       </div>
 34 |     </data-list>
 35 | 
 36 |     <data-model
 37 |       :id="1"
 38 |       endpoint="posts"
 39 |     >
 40 |       <div
 41 |         slot-scope="{ data: post, loading }"
 42 |         class="mt-8"
 43 |       >
 44 |         <h2>Single post</h2>
 45 |         <div
 46 |           v-if="post"
 47 |           class="rounded shadow-md p-4 mt-4">
 48 |           <span v-if="loading">Loading...</span>
 49 |           <h3 class="font-bold text-xl mb-2">{{ post.title }}</h3>
 50 |           <p>{{ post.body }}</p>
 51 |         </div>
 52 |       </div>
 53 |     </data-model>
 54 | 
 55 |     <data-model endpoint="posts">
 56 |       <div
 57 |         slot-scope="{ data: post, loading, create }"
 58 |         class="mt-8"
 59 |       >
 60 |         <h2>Create new post</h2>
 61 |         <div class="rounded shadow-md p-4 mt-4">
 62 |           <span v-if="loading">Loading...</span>
 63 | 
 64 |           <template v-if="post">
 65 |             <h3>{{ post.title }}</h3>
 66 |             <p>{{ post.body }}</p>
 67 |           </template>
 68 | 
 69 |           <form @submit.prevent="create(newPost)">
 70 |             <label class="block mt-4">
 71 |               <span class="block text-grey-darker text-sm">Title</span>
 72 |               <input
 73 |                 v-model="newPost.title"
 74 |                 class="shadow appearance-none border rounded mt-1 py-2 px-3 text-grey-darker"
 75 |               >
 76 |             </label>
 77 |             <label class="block mt-4">
 78 |               <span class="block text-grey-darker text-sm">Body</span>
 79 |               <textarea
 80 |                 v-model="newPost.body"
 81 |                 class="shadow appearance-none border rounded mt-1 py-2 px-3 text-grey-darker"
 82 |               />
 83 |             </label>
 84 |             <button
 85 |               :disabled="loading"
 86 |               class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mt-4"
 87 |             >
 88 |               <template v-if="loading">Loading...</template>
 89 |               <template v-else>Create</template>
 90 |             </button>
 91 |           </form>
 92 |         </div>
 93 |       </div>
 94 |     </data-model>
 95 | 
 96 |     <data-model
 97 |       :id="1"
 98 |       endpoint="posts"
 99 |     >
100 |       <div
101 |         slot-scope="{ data: post, loading, update }"
102 |         class="mt-8"
103 |       >
104 |         <h2>Edit existing post</h2>
105 |         <div
106 |           v-if="post"
107 |           class="rounded shadow-md p-4 mt-4"
108 |         >
109 |           <span v-if="loading">Loading...</span>
110 | 
111 |           <h3 class="font-bold text-xl mb-2">{{ post.title }}</h3>
112 |           <p>{{ post.body }}</p>
113 | 
114 |           <form @submit.prevent="update(post)">
115 |             <label class="block mt-4">
116 |               <span class="block text-grey-darker text-sm">Title</span>
117 |               <input
118 |                 v-model="post.title"
119 |                 class="shadow appearance-none border rounded mt-1 py-2 px-3 text-grey-darker"
120 |               >
121 |             </label>
122 |             <label class="block mt-4">
123 |               <span class="block text-grey-darker text-sm">Body</span>
124 |               <textarea
125 |                 v-model="post.body"
126 |                 class="shadow appearance-none border rounded mt-1 py-2 px-3 text-grey-darker"
127 |               />
128 |             </label>
129 |             <button
130 |               :disabled="loading"
131 |               class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mt-4">
132 |               <template v-if="loading">Loading...</template>
133 |               <template v-else>Update</template>
134 |             </button>
135 |           </form>
136 |         </div>
137 |       </div>
138 |     </data-model>
139 |   </div>
140 | </template>
141 | 
142 | <script>
143 | import DataList from './components/DataList';
144 | import DataModel from './components/DataModel';
145 | 
146 | import PostList from './components/PostList.vue';
147 | 
148 | export default {
149 |   name: `App`,
150 |   components: {
151 |     DataList,
152 |     DataModel,
153 |     PostList,
154 |   },
155 |   data() {
156 |     return {
157 |       postBeta: null,
158 |       newPost: {
159 |         title: ``,
160 |         body: ``,
161 |       },
162 |       userIdFilter: 1,
163 |     };
164 |   },
165 | };
166 | </script>
167 | 


--------------------------------------------------------------------------------
/src/components/DataList.js:
--------------------------------------------------------------------------------
 1 | import queryMixin from './mixins/query';
 2 | 
 3 | export default {
 4 |   mixins: [queryMixin],
 5 |   props: {
 6 |     // Provide a filter to limit the
 7 |     // results of the API request.
 8 |     filter: {
 9 |       type: Object,
10 |     },
11 |   },
12 |   watch: {
13 |     // Load the data from the given endpoint
14 |     // on initial rendering of the component and
15 |     // every time the filter property changes.
16 |     filter: {
17 |       immediate: true,
18 |       handler: `load`,
19 |     },
20 |   },
21 |   methods: {
22 |     load() {
23 |       return this.query(`get`, this.endpoint, { params: this.filter });
24 |     },
25 |   },
26 |   render() {
27 |     // Render the default scoped slot and
28 |     // provide data and method properties
29 |     // via the slot scope.
30 |     return this.$scopedSlots.default({
31 |       data: this.data,
32 |       error: this.error,
33 |       load: this.load,
34 |       loading: this.loading,
35 |     });
36 |   },
37 | };
38 | 


--------------------------------------------------------------------------------
/src/components/DataModel.js:
--------------------------------------------------------------------------------
 1 | import queryMixin from './mixins/query';
 2 | 
 3 | export default {
 4 |   mixins: [queryMixin],
 5 |   props: {
 6 |     // Make it possible to (optinally) provide
 7 |     // initial data via an entity property.
 8 |     entity: {
 9 |       type: Object,
10 |     },
11 |     // By providing an initial ID, we can link
12 |     // the model instance with a specific record.
13 |     id: {
14 |       type: [Number, String],
15 |     },
16 |   },
17 |   data() {
18 |     return {
19 |       data: this.entity || null,
20 |     };
21 |   },
22 |   created() {
23 |     // If an ID but no initial data entity
24 |     // was provided, the specified record
25 |     // is fetched from the API.
26 |     if (this.id && !this.data) this.find();
27 |   },
28 |   methods: {
29 |     create(data) {
30 |       return this.query(`post`, this.endpoint, data);
31 |     },
32 |     destroy() {
33 |       return this.query(`delete`, `${this.endpoint}/${this.id}`);
34 |     },
35 |     find() {
36 |       return this.query(`get`, `${this.endpoint}/${this.id}`);
37 |     },
38 |     update(data) {
39 |       return this.query(`patch`, `${this.endpoint}/${this.id}`, data);
40 |     },
41 |   },
42 |   render() {
43 |     return this.$scopedSlots.default({
44 |       create: this.create,
45 |       data: this.data,
46 |       destroy: this.destroy,
47 |       loading: this.loading,
48 |       update: this.update,
49 |     });
50 |   },
51 | };
52 | 


--------------------------------------------------------------------------------
/src/components/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p v-if="!posts.length">No posts!</p>
 4 |     <ul class="list-reset">
 5 |       <li
 6 |         v-for="post in posts"
 7 |         :key="post.id"
 8 |         class="rounded shadow-md p-4 mt-4"
 9 |       >
10 |         <data-model
11 |           :entity="post"
12 |           :id="post.id"
13 |           endpoint="posts"
14 |           @success="$emit('updated', post)"
15 |         >
16 |           <div slot-scope="{ destroy, loading }">
17 |             <h3 class="font-bold text-xl mb-2">{{ post.title }}</h3>
18 |             <p>{{ post.body }}</p>
19 |             <button
20 |               :disabled="loading"
21 |               class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded mt-4"
22 |               @click="destroy"
23 |             >
24 |               <template v-if="loading">Loading...</template>
25 |               <template v-else>Delete</template>
26 |             </button>
27 |           </div>
28 |         </data-model>
29 |       </li>
30 |     </ul>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import DataModel from './DataModel';
36 | 
37 | export default {
38 |   name: `PostList`,
39 |   components: {
40 |     DataModel,
41 |   },
42 |   props: {
43 |     posts: {
44 |       type: Array,
45 |       default: () => [],
46 |     },
47 |   },
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/components/mixins/query.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export default {
 4 |   props: {
 5 |     baseUrl: {
 6 |       type: String,
 7 |       // The JSONPlaceholder API is a fake API
 8 |       // basically a Lorem Ipsum JSON API.
 9 |       default: `https://jsonplaceholder.typicode.com`,
10 |     },
11 |     endpoint: {
12 |       type: String,
13 |       required: true,
14 |     },
15 |   },
16 |   data() {
17 |     return {
18 |       // Create a new axios instance.
19 |       // See: https://github.com/axios/axios#creating-an-instance
20 |       api: axios.create({ baseURL: this.baseUrl }),
21 |       data: null,
22 |       error: null,
23 |       loading: false,
24 |     };
25 |   },
26 |   methods: {
27 |     // The `query` method will handle
28 |     // different query types for us.
29 |     async query(type, ...params) {
30 |       // If we're currently loading content
31 |       // we don't submit an additional request.
32 |       if (this.loading) return;
33 | 
34 |       this.loading = true;
35 |       try {
36 |         const response = await this.api[type](...params);
37 |         this.data = response.data;
38 |         this.error = null;
39 |         this.$emit(`success`, response);
40 |       } catch (error) {
41 |         this.data = null;
42 |         this.error = error.response;
43 |         this.$emit(`error`, error);
44 |       }
45 |       this.loading = false;
46 |     },
47 |   },
48 | };
49 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount(`#app`);
9 | 


--------------------------------------------------------------------------------