├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── css │ └── app.73ea15ca.css ├── favicon.ico ├── index.html └── js │ ├── app.98c22e38.js │ ├── app.98c22e38.js.map │ ├── chunk-vendors.c932d26a.js │ └── chunk-vendors.c932d26a.js.map ├── netlify.toml ├── package.json ├── public ├── favicon.ico └── index.html ├── screenshot.png ├── src ├── App.vue ├── components │ ├── ArticlesList.vue │ └── Nav.vue ├── containers │ ├── Article.vue │ ├── Articles.vue │ └── Category.vue ├── main.js └── vue-apollo.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | ############################ 2 | # OS X 3 | ############################ 4 | 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | .Spotlight-V100 10 | .Trashes 11 | ._* 12 | 13 | 14 | ############################ 15 | # Linux 16 | ############################ 17 | 18 | *~ 19 | 20 | 21 | ############################ 22 | # Windows 23 | ############################ 24 | 25 | Thumbs.db 26 | ehthumbs.db 27 | Desktop.ini 28 | $RECYCLE.BIN/ 29 | *.cab 30 | *.msi 31 | *.msm 32 | *.msp 33 | 34 | 35 | ############################ 36 | # Packages 37 | ############################ 38 | 39 | *.7z 40 | *.csv 41 | *.dat 42 | *.dmg 43 | *.gz 44 | *.iso 45 | *.jar 46 | *.rar 47 | *.tar 48 | *.com 49 | *.class 50 | *.dll 51 | *.exe 52 | *.o 53 | *.seed 54 | *.so 55 | *.swo 56 | *.swp 57 | *.swn 58 | *.swm 59 | *.out 60 | *.pid 61 | 62 | 63 | ############################ 64 | # Logs and databases 65 | ############################ 66 | 67 | .tmp 68 | *.log 69 | *.sql 70 | *.sqlite 71 | *.sqlite3 72 | 73 | 74 | ############################ 75 | # Misc. 76 | ############################ 77 | 78 | *# 79 | ssl 80 | .idea 81 | nbproject 82 | public/uploads/* 83 | !public/uploads/.gitkeep 84 | 85 | ############################ 86 | # Node.js 87 | ############################ 88 | 89 | lib-cov 90 | lcov.info 91 | pids 92 | logs 93 | results 94 | node_modules 95 | .node_history 96 | 97 | 98 | ############################ 99 | # Tests 100 | ############################ 101 | 102 | testApp 103 | coverage 104 | 105 | ############################ 106 | # Strapi 107 | ############################ 108 | 109 | exports 110 | .cache 111 | build 112 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > **Warning :warning:** 2 | > 3 | > This starter is deprecated. 4 | > 5 | > Instead, we recommend that you use our other Vue blog starters with better SEO support: 6 | > 7 | > * [**strapi-starter-gridsome-blog**](https://github.com/strapi/strapi-starter-gridsome-blog) 8 | > * [**strapi-starter-nuxt-blog**](https://github.com/strapi/strapi-starter-nuxt-blog) 9 | 10 | # Strapi Starter Vue Blog 11 | 12 | Vue starter for creating a blog with Strapi. 13 | 14 | ![screenshot image](/screenshot.png) 15 | 16 | This starter allows you to try Strapi with Vue with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. Do not hesitate to add new features etc ... 17 | 18 | You may want to know how to develop such a starter by your own! This starter is actually the result of this [tutorial](https://strapi.io/blog/build-a-blog-with-vue-strapi-and-apollo) 19 | 20 | ## Features 21 | 22 | - 2 Content types: Article, Category 23 | - 2 Created articles 24 | - 3 Created categories 25 | - Permissions set to `true` for article and category 26 | - Responsive design using UIkit 27 | 28 | Pages: 29 | 30 | - "/" display every articles 31 | - "/article/:id" display one article 32 | - "/category/:id" display articles depending on the category 33 | 34 | ## Getting started 35 | 36 | ### Backend 37 | 38 | See full instructions [here](https://github.com/strapi/strapi-legacy-blog) 39 | 40 | ### Frontend 41 | 42 | Start by installing the starter: 43 | 44 | ```bash 45 | git clone https://github.com/strapi/strapi-starter-vue-blog.git 46 | cd strapi-starter-vue-blog 47 | ``` 48 | 49 | Then start the frontend server: 50 | 51 | ```bash 52 | # Using yarn 53 | yarn install 54 | yarn develop 55 | 56 | # Using npm 57 | npm install 58 | npm run develop 59 | 60 | # Create a .env file containing the VUE_APP_STRAPI_API_URL variable 61 | echo "VUE_APP_STRAPI_API_URL=http://localhost:1337" >> .env 62 | ``` 63 | 64 | Vue server is running here => [http://localhost:8080](http://localhost:8080) 65 | 66 | Enjoy this starter! 67 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /dist/css/app.73ea15ca.css: -------------------------------------------------------------------------------- 1 | a{text-decoration:none}h1{font-size:120px}#category,h1{font-family:Staatliches}#category{font-weight:500}#title{letter-spacing:.4px;font-size:22px;font-size:1.375rem;line-height:1.13636}#banner{margin:20px;height:800px}#editor{font-size:16px;font-size:1rem;line-height:1.75}.uk-navbar-container{background:#fff!important;font-family:Staatliches}img:hover{opacity:1;-webkit-transition:opacity .25s cubic-bezier(.39,.575,.565,1);transition:opacity .25s cubic-bezier(.39,.575,.565,1)} -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/strapi/strapi-starter-vue-blog/b02b6cad795e67ad9a5bfbcac273e0e08bc129bf/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | frontend
-------------------------------------------------------------------------------- /dist/js/app.98c22e38.js: -------------------------------------------------------------------------------- 1 | (function(t){function e(e){for(var s,i,c=e[0],l=e[1],u=e[2],d=0,f=[];d\n
\n
\n
\n \n
\n
\n \"\"\n
\n
\n \n {{ article.category.name }}\n

\n

{{ article.title }}

\n
\n
\n \n
\n
\n
\n \n
\n
\n \"\"\n
\n
\n \n {{ article.category.name }}\n

\n

{{ article.title }}

\n
\n
\n \n
\n
\n
\n
\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ArticlesList.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ArticlesList.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ArticlesList.vue?vue&type=template&id=666d2562&\"\nimport script from \"./ArticlesList.vue?vue&type=script&lang=js&\"\nexport * from \"./ArticlesList.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import { ApolloClient } from \"apollo-client\";\nimport { createHttpLink } from \"apollo-link-http\";\nimport { InMemoryCache } from \"apollo-cache-inmemory\";\n\n// HTTP connection to the API\nconst httpLink = createHttpLink({\n // You should use an absolute URL here\n uri: process.env.VUE_APP_STRAPI_API_URL + \"/graphql\" || \"http://localhost:1337/graphql\"\n});\n\n// Cache implementation\nconst cache = new InMemoryCache();\n\n// Create the apollo client\nconst apolloClient = new ApolloClient({\n link: httpLink,\n cache\n});\n\nexport default apolloClient;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('Nav'),_c('router-view',{key:_vm.$route.fullPath})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('nav',{staticClass:\"uk-navbar-container\",attrs:{\"uk-navbar\":\"\"}},[_vm._m(0),_c('div',{staticClass:\"uk-navbar-right\"},[_c('ul',{staticClass:\"uk-navbar-nav\"},_vm._l((_vm.categories),function(category){return _c('li',{key:category.id},[_c('router-link',{key:category.id,attrs:{\"to\":{ path: '/category/' + category.id }}},[_vm._v(\" \"+_vm._s(category.name)+\" \")])],1)}),0)])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"uk-navbar-left\"},[_c('ul',{staticClass:\"uk-navbar-nav\"},[_c('li',[_c('a',{attrs:{\"href\":\"/\"}},[_vm._v(\"Strapi Blog \")])])])])}]\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Nav.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Nav.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Nav.vue?vue&type=template&id=45e407c8&\"\nimport script from \"./Nav.vue?vue&type=script&lang=js&\"\nexport * from \"./Nav.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=26d8c572&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from \"vue\";\nimport VueApollo from \"vue-apollo\";\nimport apolloClient from \"./vue-apollo\";\nimport VueRouter from \"vue-router\";\n\nimport App from \"./App.vue\";\n\nVue.config.productionTip = false;\nVue.use(VueApollo);\nVue.use(VueRouter);\n\nconst apolloProvider = new VueApollo({\n defaultClient: apolloClient\n});\n\nconst router = new VueRouter({\n mode: \"history\",\n routes: [\n {\n path: \"/\",\n components: require(\"./containers/Articles.vue\")\n },\n {\n path: \"/article/:id\",\n components: require(\"./containers/Article.vue\")\n },\n {\n path: \"/category/:id\",\n components: require(\"./containers/Category.vue\")\n }\n ]\n});\n\nnew Vue({\n apolloProvider,\n router,\n render: h => h(App)\n}).$mount(\"#app\");\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.article.image)?_c('div',{staticClass:\"uk-height-small uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding\",attrs:{\"id\":\"banner\",\"data-src\":_vm.api_url + _vm.article.image.url,\"uk-img\":\"\"}},[_c('h1',[_vm._v(_vm._s(_vm.article.title))])]):_vm._e(),_c('div',{staticClass:\"uk-section\"},[_c('div',{staticClass:\"uk-container uk-container-small\"},[(_vm.article.content)?_c('vue-markdown-it',{attrs:{\"source\":_vm.article.content,\"id\":\"editor\"}}):_vm._e(),(_vm.article.published_at)?_c('p',[_vm._v(\" \"+_vm._s(_vm.moment(_vm.article.published_at).format(\"MMM Do YY\"))+\" \")]):_vm._e()],1)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Article.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Article.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Article.vue?vue&type=template&id=14d04f56&\"\nimport script from \"./Article.vue?vue&type=script&lang=js&\"\nexport * from \"./Article.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"uk-section\"},[_c('div',{staticClass:\"uk-container uk-container-large\"},[_c('h1',[_vm._v(\"Strapi blog\")]),_c('ArticlesList',{attrs:{\"articles\":_vm.articles}})],1)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Articles.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Articles.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Articles.vue?vue&type=template&id=4ecda487&\"\nimport script from \"./Articles.vue?vue&type=script&lang=js&\"\nexport * from \"./Articles.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:\"uk-section\"},[_c('div',{staticClass:\"uk-container uk-container-large\"},[_c('h1',[_vm._v(_vm._s(_vm.category.name))]),_c('ArticlesList',{attrs:{\"articles\":_vm.category.articles || []}})],1)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Category.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Category.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Category.vue?vue&type=template&id=7ad7f3a0&\"\nimport script from \"./Category.vue?vue&type=script&lang=js&\"\nexport * from \"./Category.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports"],"sourceRoot":""} -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | base = "./" 3 | publish = "dist/" 4 | command = "yarn build" 5 | 6 | [template.environment] 7 | VUE_APP_STRAPI_API_URL = "API_URL" 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "develop": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "apollo-cache-inmemory": "^1.6.5", 13 | "apollo-client": "^2.6.8", 14 | "apollo-link": "^1.2.13", 15 | "apollo-link-http": "^1.5.16", 16 | "core-js": "^3.6.4", 17 | "graphql": "^14.6.0", 18 | "graphql-tag": "^2.10.3", 19 | "moment": "^2.27.0", 20 | "vue": "^2.6.11", 21 | "vue-apollo": "^3.0.3", 22 | "vue-markdown-it": "^0.9.4", 23 | "vue-router": "^3.1.5" 24 | }, 25 | "devDependencies": { 26 | "@vue/cli-plugin-babel": "^4.2.0", 27 | "@vue/cli-plugin-eslint": "^4.2.0", 28 | "@vue/cli-service": "^4.2.0", 29 | "babel-eslint": "^10.0.3", 30 | "eslint": "^6.7.2", 31 | "eslint-plugin-vue": "^6.1.2", 32 | "vue-template-compiler": "^2.6.11" 33 | }, 34 | "eslintConfig": { 35 | "root": true, 36 | "env": { 37 | "node": true 38 | }, 39 | "extends": [ 40 | "plugin:vue/essential", 41 | "eslint:recommended" 42 | ], 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | }, 46 | "rules": {} 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/strapi/strapi-starter-vue-blog/b02b6cad795e67ad9a5bfbcac273e0e08bc129bf/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/strapi/strapi-starter-vue-blog/b02b6cad795e67ad9a5bfbcac273e0e08bc129bf/screenshot.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | 17 | 60 | -------------------------------------------------------------------------------- /src/components/ArticlesList.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 84 | -------------------------------------------------------------------------------- /src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 50 | -------------------------------------------------------------------------------- /src/containers/Article.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 69 | -------------------------------------------------------------------------------- /src/containers/Articles.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 45 | -------------------------------------------------------------------------------- /src/containers/Category.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueApollo from "vue-apollo"; 3 | import apolloClient from "./vue-apollo"; 4 | import VueRouter from "vue-router"; 5 | 6 | import App from "./App.vue"; 7 | 8 | Vue.config.productionTip = false; 9 | Vue.use(VueApollo); 10 | Vue.use(VueRouter); 11 | 12 | const apolloProvider = new VueApollo({ 13 | defaultClient: apolloClient 14 | }); 15 | 16 | const router = new VueRouter({ 17 | mode: "history", 18 | routes: [ 19 | { 20 | path: "/", 21 | components: require("./containers/Articles.vue") 22 | }, 23 | { 24 | path: "/article/:id", 25 | components: require("./containers/Article.vue") 26 | }, 27 | { 28 | path: "/category/:id", 29 | components: require("./containers/Category.vue") 30 | } 31 | ] 32 | }); 33 | 34 | new Vue({ 35 | apolloProvider, 36 | router, 37 | render: h => h(App) 38 | }).$mount("#app"); 39 | -------------------------------------------------------------------------------- /src/vue-apollo.js: -------------------------------------------------------------------------------- 1 | import { ApolloClient } from "apollo-client"; 2 | import { createHttpLink } from "apollo-link-http"; 3 | import { InMemoryCache } from "apollo-cache-inmemory"; 4 | 5 | // HTTP connection to the API 6 | const httpLink = createHttpLink({ 7 | // You should use an absolute URL here 8 | uri: process.env.VUE_APP_STRAPI_API_URL + "/graphql" || "http://localhost:1337/graphql" 9 | }); 10 | 11 | // Cache implementation 12 | const cache = new InMemoryCache(); 13 | 14 | // Create the apollo client 15 | const apolloClient = new ApolloClient({ 16 | link: httpLink, 17 | cache 18 | }); 19 | 20 | export default apolloClient; 21 | --------------------------------------------------------------------------------