diff --git a/app/assets/main.js b/app/assets/main.js
index 461ec65..26a33e5 100644
--- a/app/assets/main.js
+++ b/app/assets/main.js
@@ -1,7 +1,11 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(router)
+app.use(VueAxios, axios)
+app.provide('axios', app.config.globalProperties.axios) // provide 'axios'
app.mount('#app')
\ No newline at end of file
diff --git a/app/assets/views/HomeView.vue b/app/assets/views/HomeView.vue
index b2f943d..8631d78 100644
--- a/app/assets/views/HomeView.vue
+++ b/app/assets/views/HomeView.vue
@@ -2,30 +2,23 @@
export default {
data() {
return {
- resources: [
- {
- url: 'https://getbootstrap.com/docs/5.3/getting-started/introduction/',
- title: 'Bootstrap quick start guide'
- },
- {
- url: 'https://getbootstrap.com/docs/5.3/getting-started/webpack/',
- title: 'Bootstrap Webpack guide'
- },
- {
- url: 'https://getbootstrap.com/docs/5.3/getting-started/parcel/',
- title: 'Bootstrap Parcel guide'
- },
- {
- url: 'https://getbootstrap.com/docs/5.3/getting-started/vite/',
- title: 'Bootstrap Vite guide'
- },
- {
- url: 'https://getbootstrap.com/docs/5.3/getting-started/contribute/',
- title: 'Contributing to Bootstrap'
- },
- ]
+ resources: [],
+ loading: false,
+ };
+ },
+ methods: {
+ getList() {
+ this.loading = true
+ this.axios.get('/api').then((response) => {
+ // console.log(response.data)
+ this.resources = response.data
+ this.loading = false
+ })
}
- }
+ },
+ created() {
+ this.getList()
+ },
}
@@ -55,9 +48,10 @@ export default {
Additional resources
+
diff --git a/app/src/Controller/AppController.php b/app/src/Controller/AppController.php
index af4512b..64c1fb7 100644
--- a/app/src/Controller/AppController.php
+++ b/app/src/Controller/AppController.php
@@ -26,4 +26,41 @@ public function pageIndex(Response $response, Twig $view): Response
{
return $view->render($response, 'pages/index.html.twig');
}
+
+ public function api(Response $response): Response
+ {
+ $data = [
+ [
+ 'url' => 'https://getbootstrap.com/docs/5.3/getting-started/introduction/',
+ 'title' => 'Bootstrap quick start guide',
+ 'number' => rand(1, 100)
+ ],
+ [
+ 'url' => 'https://getbootstrap.com/docs/5.3/getting-started/webpack/',
+ 'title' => 'Bootstrap Webpack guide',
+ 'number' => rand(1, 100)
+ ],
+ [
+ 'url' => 'https://getbootstrap.com/docs/5.3/getting-started/parcel/',
+ 'title' => 'Bootstrap Parcel guide',
+ 'number' => rand(1, 100)
+ ],
+ [
+ 'url' => 'https://getbootstrap.com/docs/5.3/getting-started/vite/',
+ 'title' => 'Bootstrap Vite guide',
+ 'number' => rand(1, 100)
+ ],
+ [
+ 'url' => 'https://getbootstrap.com/docs/5.3/getting-started/contribute/',
+ 'title' => 'Contributing to Bootstrap',
+ 'number' => rand(1, 100)
+ ],
+ ];
+
+ // Write empty response
+ $payload = json_encode($data, JSON_THROW_ON_ERROR | JSON_PRETTY_PRINT);
+ $response->getBody()->write($payload);
+
+ return $response->withHeader('Content-Type', 'application/json');
+ }
}
diff --git a/app/src/Routes.php b/app/src/Routes.php
index 7eee763..f41aca1 100644
--- a/app/src/Routes.php
+++ b/app/src/Routes.php
@@ -11,14 +11,15 @@
namespace UserFrosting\Demo;
use Slim\App;
-use UserFrosting\Routes\RouteDefinitionInterface;
use UserFrosting\Demo\Controller\AppController;
+use UserFrosting\Routes\RouteDefinitionInterface;
class Routes implements RouteDefinitionInterface
{
public function register(App $app): void
{
// Use a catch-all route to allow the user to refresh the page when using vue-router createWebHistory API
+ $app->get('/api', [AppController::class, 'api'])->setName('api');
$app->get('/[{path:.*}]', [AppController::class, 'pageIndex'])->setName('index');
}
}
diff --git a/package-lock.json b/package-lock.json
index 3c5071c..af54a07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,8 +5,10 @@
"packages": {
"": {
"dependencies": {
+ "axios": "^1.5.0",
"uikit": "^3.16.26",
"vue": "^3.3.4",
+ "vue-axios": "^3.5.2",
"vue-router": "^4.2.4"
},
"devDependencies": {
@@ -3022,6 +3024,21 @@
"webpack": ">=5.0.0"
}
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+ },
+ "node_modules/axios": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+ "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/babel-loader": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -3437,6 +3454,17 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -4009,6 +4037,14 @@
"node": ">=6"
}
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4539,7 +4575,6 @@
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
- "dev": true,
"funding": [
{
"type": "individual",
@@ -4555,6 +4590,19 @@
}
}
},
+ "node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -5687,7 +5735,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"engines": {
"node": ">= 0.6"
}
@@ -5696,7 +5743,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
@@ -6869,6 +6915,11 @@
"node": ">= 0.10"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -8170,6 +8221,15 @@
"@vue/shared": "3.3.4"
}
},
+ "node_modules/vue-axios": {
+ "version": "3.5.2",
+ "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
+ "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
+ "peerDependencies": {
+ "axios": "*",
+ "vue": "^3.0.0 || ^2.0.0"
+ }
+ },
"node_modules/vue-loader": {
"version": "17.2.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.2.2.tgz",
diff --git a/package.json b/package.json
index 3bd6194..e8c7d69 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,9 @@
{
"dependencies": {
+ "axios": "^1.5.0",
"uikit": "^3.16.26",
"vue": "^3.3.4",
+ "vue-axios": "^3.5.2",
"vue-router": "^4.2.4"
},
"devDependencies": {