├── src
    ├── views
    │   ├── About.vue
    │   ├── 404.vue
    │   ├── Home.vue
    │   ├── Article.vue
    │   ├── ModifyBlog.vue
    │   └── Edit.vue
    ├── assets
    │   ├── logo.png
    │   └── styles
    │   │   ├── app.scss
    │   │   ├── common.scss
    │   │   ├── element.scss
    │   │   ├── responsive.scss
    │   │   └── modules
    │   │       └── card.scss
    ├── shims-vue.d.ts
    ├── Interfaces
    │   └── Posts.ts
    ├── store
    │   ├── index.ts
    │   └── modules
    │   │   ├── globalValues.ts
    │   │   └── posts.ts
    ├── shims-tsx.d.ts
    ├── utils
    │   └── utils.ts
    ├── main.ts
    ├── api
    │   └── index.ts
    ├── App.vue
    ├── router
    │   └── index.ts
    └── components
    │   ├── Navbar.vue
    │   └── HelloWorld.vue
├── .browserslistrc
├── .prettierrc.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── jest.config.js
├── tests
    └── unit
    │   └── example.spec.ts
├── .gitignore
├── tsconfig.json
├── .eslintrc.js
├── README.md
└── package.json


/src/views/About.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: false,
3 |   singleQuote: true
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/preetishhs/Vue-typescript-example/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/preetishhs/Vue-typescript-example/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from "vue";
3 |   export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/app.scss:
--------------------------------------------------------------------------------
1 | @import 'responsive';
2 | @import 'common';
3 | @import './modules/card.scss';
4 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/styles/common.scss:
--------------------------------------------------------------------------------
1 | .page-title {
2 |   text-align: center;
3 |   font-size: 32px;
4 |   padding: 4rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/Interfaces/Posts.ts:
--------------------------------------------------------------------------------
1 | interface Post {
2 |   title: string
3 |   id: number
4 |   body: string
5 | }
6 | 
7 | export { Post }
8 | 


--------------------------------------------------------------------------------
/src/assets/styles/element.scss:
--------------------------------------------------------------------------------
1 | $--font-path: '~element-ui/lib/theme-chalk/fonts';
2 | @import '~element-ui/packages/theme-chalk/src/index';
3 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils'
2 | 
3 | describe('HelloWorld.vue', () => {
4 |   it('Sanity test', () => {
5 |     expect(1).toBe(1)
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import globalValues from '@/store/modules/globalValues'
 4 | import posts from '@/store/modules/posts'
 5 | Vue.use(Vuex)
 6 | const store = new Vuex.Store({
 7 |   modules: {
 8 |     globalValues,
 9 |     posts
10 |   }
11 | })
12 | export default store
13 | 


--------------------------------------------------------------------------------
/src/views/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="not-found">
 3 |     Page not found
 4 |   </div>
 5 | </template>
 6 | <style lang="scss" scoped>
 7 | .not-found {
 8 |   font-size: 3rem;
 9 |   font-weight: bold;
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   height: 80vh;
14 | }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from "vue";
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | import { Notification } from 'element-ui'
 2 | 
 3 | interface NotifyObj {
 4 |   title: string
 5 |   message: string
 6 |   type: 'success' | 'warning' | 'info' | 'error' | undefined
 7 | }
 8 | function notify(data: NotifyObj) {
 9 |   Notification({
10 |     title: data.title,
11 |     message: data.message,
12 |     type: data.type,
13 |     offset: 100,
14 |     duration: 5000
15 |   })
16 | }
17 | 
18 | export { notify }
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | // Element UI
 7 | import ElementUI from 'element-ui'
 8 | import '@/assets/styles/element.scss'
 9 | Vue.use(ElementUI)
10 | 
11 | //styles
12 | import '@/assets/styles/app.scss'
13 | Vue.config.productionTip = false
14 | 
15 | new Vue({
16 |   router,
17 |   store,
18 |   render: h => h(App)
19 | }).$mount('#app')
20 | 


--------------------------------------------------------------------------------
/src/store/modules/globalValues.ts:
--------------------------------------------------------------------------------
 1 | import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
 2 | @Module({ namespaced: true })
 3 | class GlobalValues extends VuexModule {
 4 |   public isLoading?: boolean = false
 5 |   @Mutation
 6 |   public updateLoading(newVal: boolean): void {
 7 |     this.isLoading = newVal
 8 |   }
 9 |   @Action
10 |   public setLoading(newVal: boolean): void {
11 |     this.context.commit('updateLoading', newVal)
12 |   }
13 | }
14 | export default GlobalValues
15 | 


--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import store from '@/store'
 3 | 
 4 | const config = {
 5 |   baseURL: 'https://jsonplaceholder.typicode.com',
 6 |   headers: { Accept: 'application/json' }
 7 | }
 8 | 
 9 | const call = axios.create(config)
10 | call.interceptors.request.use(request => {
11 |   store.dispatch('globalValues/setLoading', true)
12 |   return request
13 | })
14 | call.interceptors.response.use(
15 |   response => {
16 |     store.dispatch('globalValues/setLoading', false)
17 |     return response
18 |   },
19 |   error => {
20 |     store.dispatch('globalValues/setLoading', false)
21 |     return error
22 |   }
23 | )
24 | export default call
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": ["webpack-env", "jest"],
15 |     "paths": {
16 |       "@/*": ["src/*"]
17 |     },
18 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
19 |   },
20 |   "include": [
21 |     "src/**/*.ts",
22 |     "src/**/*.tsx",
23 |     "src/**/*.vue",
24 |     "tests/**/*.ts",
25 |     "tests/**/*.tsx"
26 |   ],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |     "@vue/prettier",
11 |     "@vue/prettier/@typescript-eslint"
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020
15 |   },
16 |   rules: {
17 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
18 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
19 |   },
20 |   overrides: [
21 |     {
22 |       files: [
23 |         "**/__tests__/*.{j,t}s?(x)",
24 |         "**/tests/unit/**/*.spec.{j,t}s?(x)"
25 |       ],
26 |       env: {
27 |         jest: true
28 |       }
29 |     }
30 |   ]
31 | };
32 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" v-loading="isLoading">
 3 |     <navbar />
 4 |     <router-view :key="$route.fullPath" />
 5 |   </div>
 6 | </template>
 7 | <script lang="ts">
 8 | import { Vue, Component } from 'vue-property-decorator'
 9 | import Navbar from '@/components/Navbar.vue'
10 | import { namespace } from 'vuex-class'
11 | const globalValues = namespace('globalValues')
12 | @Component({
13 |   components: {
14 |     Navbar
15 |   }
16 | })
17 | export default class App extends Vue {
18 |   @globalValues.State
19 |   public isLoading!: boolean
20 | }
21 | </script>
22 | <style lang="scss">
23 | body {
24 |   font-family: 'Raleway', sans-serif;
25 |   box-sizing: border-box;
26 | }
27 | *,
28 | *::after,
29 | *::before {
30 |   margin: 0;
31 |   padding: 0;
32 |   box-sizing: inherit;
33 | }
34 | #app {
35 |   min-height: 100vh;
36 |   width: 100%;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/assets/styles/responsive.scss:
--------------------------------------------------------------------------------
 1 | @mixin respond($breakpoint) {
 2 |   @if $breakpoint == big-desktop {
 3 |     @media (min-width: 1800px) {
 4 |       @content;
 5 |     }
 6 |   }
 7 |   @if $breakpoint == small-desktop {
 8 |     @media (max-width: 1200px) {
 9 |       @content;
10 |     }
11 |   }
12 |   @if $breakpoint == tab {
13 |     @media (max-width: 992px) {
14 |       @content;
15 |     }
16 |   }
17 |   @if $breakpoint == phone {
18 |     @media (max-width: 768px) {
19 |       @content;
20 |     }
21 |   }
22 | }
23 | 
24 | html {
25 |   font-size: 62.5%;
26 |   /*    16px (browser default) * 62.5 = 10px   
27 |           now we can use rem units at all places 
28 |           1rem = 10px;
29 |           1.6rem = 16px;
30 |     */
31 |   @include respond(small-desktop) {
32 |     font-size: 56.25%;
33 |   }
34 |   @include respond(tab) {
35 |     font-size: 52%;
36 |   }
37 |   @include respond(phone) {
38 |     font-size: 50%;
39 |   }
40 |   @include respond(big-desktop) {
41 |     font-size: 70%;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/assets/styles/modules/card.scss:
--------------------------------------------------------------------------------
 1 | .card-container {
 2 |   display: flex;
 3 |   padding: 2rem 5rem;
 4 |   flex-wrap: wrap;
 5 |   justify-content: center;
 6 | }
 7 | .article {
 8 |   width: 40rem;
 9 |   height: 40rem;
10 |   margin: 1.5rem;
11 |   position: relative;
12 |   &:hover {
13 |     transform: scale(1.02);
14 |     transition: all 0.2s;
15 |     box-shadow: 0.1rem 0.1rem 1.4rem #ccc;
16 |   }
17 |   .image {
18 |     height: 30rem;
19 |     width: 100%;
20 |     object-fit: cover;
21 |   }
22 |   .title {
23 |     font-size: 2.4rem;
24 |     font-weight: bold;
25 |     padding: 1rem;
26 |     height: 10rem;
27 |     text-align: center;
28 |   }
29 | }
30 | 
31 | .overlay {
32 |   display: flex;
33 |   flex-flow: column;
34 |   padding: 5rem;
35 |   align-items: center;
36 |   justify-content: center;
37 |   z-index: 5;
38 |   position: absolute;
39 |   width: 100%;
40 |   height: 100%;
41 |   background-image: linear-gradient(
42 |     to right,
43 |     rgba(0, 0, 0, 0.7),
44 |     rgba(0, 0, 0, 0.7)
45 |   );
46 |   .el-button {
47 |     width: 80%;
48 |     margin: 2rem;
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <h1 class="page-title">Welcome to my Blog</h1>
 4 |     <div class="card-container">
 5 |       <router-link
 6 |         v-for="post in list"
 7 |         :key="post.id"
 8 |         :to="'/article/' + post.id"
 9 |       >
10 |         <el-card :body-style="{ padding: '0px' }" class="article">
11 |           <img
12 |             src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg"
13 |             class="image"
14 |           />
15 |           <div class="title">
16 |             {{ post.title }}
17 |           </div>
18 |         </el-card>
19 |       </router-link>
20 |     </div>
21 |   </div>
22 | </template>
23 | <script lang="ts">
24 | import { Vue, Component } from 'vue-property-decorator'
25 | import { namespace } from 'vuex-class'
26 | const posts = namespace('posts')
27 | @Component
28 | export default class Home extends Vue {
29 |   mounted() {
30 |     this.getAllPosts()
31 |   }
32 |   @posts.State
33 |   public list!: Array<object>
34 | 
35 |   @posts.Action
36 |   public getAllPosts!: () => void
37 | }
38 | </script>
39 | <style lang="scss" scoped>
40 | a {
41 |   text-decoration: none;
42 |   font-style: none;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '@/views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'home',
11 |     component: Home
12 |   },
13 |   {
14 |     path: '/article/:id',
15 |     name: 'article',
16 |     component: () =>
17 |       import(/* webpackChunkName: "ModifyBlog" */ '@/views/Article.vue')
18 |   },
19 |   {
20 |     path: '/modify',
21 |     name: 'modify',
22 |     component: () =>
23 |       import(/* webpackChunkName: "ModifyBlog" */ '@/views/ModifyBlog.vue')
24 |   },
25 |   {
26 |     path: '/create',
27 |     name: 'create',
28 |     component: () =>
29 |       import(/* webpackChunkName: "CreateItem" */ '@/views/Edit.vue')
30 |   },
31 |   {
32 |     path: '/edit/:id',
33 |     name: 'edit',
34 |     component: () =>
35 |       import(/* webpackChunkName: "EditItem" */ '@/views/Edit.vue')
36 |   },
37 |   {
38 |     path: '/about',
39 |     name: 'about',
40 |     component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
41 |   },
42 |   {
43 |     path: '*',
44 |     name: 'notFound',
45 |     component: () => import(/* webpackChunkName: "about" */ '@/views/404.vue')
46 |   }
47 | ]
48 | 
49 | const router = new VueRouter({
50 |   mode: 'history',
51 |   base: process.env.BASE_URL,
52 |   routes
53 | })
54 | 
55 | export default router
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ts-vue-sample
 2 | 
 3 | Mock server used https://jsonplaceholder.typicode.com/
 4 | 
 5 | **This is a simple Blog (with CRUD Operation) to showcase the usage of:**
 6 | 
 7 | - Vue
 8 | - Vuex and Modules
 9 | - vue-router
10 | - Typescript (Class based API)
11 | - Axios
12 | - Code splitting/ Lazy loading
13 | 
14 | ### Styling
15 | 
16 | - SASS/SCSS pre-processor is used for CSS styling.
17 | - Element UI library is used to enhance the look and feel of the app.
18 | - Basic responsive design
19 | - CSS Resets
20 | 
21 | ### Vuex
22 | 
23 | Using Vuex to store some common data and accessing them using Helpers in components. Using modular approach by creating specific modules to store and access data.
24 | 
25 | ### Typing
26 | 
27 | Class based API approach is used here. Using `vue-property-decorator` to decorate modules in Component files.
28 | Using `vuex-module-decorators` to decorate Vuex modules and `vuex-class` library to access the Vuex properties such as `state`, `actions`, `getters` etc in components.
29 | 
30 | ## Project setup
31 | 
32 | ```
33 | npm install
34 | ```
35 | 
36 | ### Compiles and hot-reloads for development
37 | 
38 | ```
39 | npm run serve
40 | ```
41 | 
42 | ### Compiles and minifies for production
43 | 
44 | ```
45 | npm run build
46 | ```
47 | 
48 | ### Run your unit tests
49 | 
50 | ```
51 | npm run test:unit
52 | ```
53 | 
54 | ### Lints and fixes files
55 | 
56 | ```
57 | npm run lint
58 | ```
59 | 
60 | ### Customize configuration
61 | 
62 | See [Configuration Reference](https://cli.vuejs.org/config/).
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ts-vue-sample",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.19.2",
13 |     "core-js": "^3.6.4",
14 |     "element-ui": "^2.13.0",
15 |     "vue": "^2.6.11",
16 |     "vue-class-component": "^7.2.2",
17 |     "vue-property-decorator": "^8.3.0",
18 |     "vue-router": "^3.1.5",
19 |     "vuex": "^3.1.2",
20 |     "vuex-class": "^0.3.2",
21 |     "vuex-module-decorators": "^0.16.1"
22 |   },
23 |   "devDependencies": {
24 |     "@types/jest": "^24.0.19",
25 |     "@typescript-eslint/eslint-plugin": "^2.18.0",
26 |     "@typescript-eslint/parser": "^2.18.0",
27 |     "@vue/cli-plugin-babel": "^4.2.0",
28 |     "@vue/cli-plugin-eslint": "^4.2.0",
29 |     "@vue/cli-plugin-router": "^4.2.0",
30 |     "@vue/cli-plugin-typescript": "^4.2.0",
31 |     "@vue/cli-plugin-unit-jest": "^4.2.0",
32 |     "@vue/cli-plugin-vuex": "^4.2.0",
33 |     "@vue/cli-service": "^4.2.0",
34 |     "@vue/eslint-config-prettier": "^6.0.0",
35 |     "@vue/eslint-config-typescript": "^5.0.1",
36 |     "@vue/test-utils": "1.0.0-beta.31",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-prettier": "^3.1.1",
39 |     "eslint-plugin-vue": "^6.1.2",
40 |     "node-sass": "^4.12.0",
41 |     "prettier": "^1.19.1",
42 |     "sass-loader": "^8.0.2",
43 |     "typescript": "~3.7.5",
44 |     "vue-template-compiler": "^2.6.11"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/views/Article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="blog">
 3 |     <h1 class="page-title">Article</h1>
 4 |     <div class="main">
 5 |       <div class="banner-container">
 6 |         <img
 7 |           src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg"
 8 |           class="banner"
 9 |         />
10 |       </div>
11 | 
12 |       <h1 class="page-title article-title">{{ article.title }}</h1>
13 |       <div class="article-description">{{ article.body }}</div>
14 |     </div>
15 |   </div>
16 | </template>
17 | <script lang="ts">
18 | import { Vue, Component } from 'vue-property-decorator'
19 | import { namespace } from 'vuex-class'
20 | const posts = namespace('posts')
21 | interface ArticleStructure {
22 |   id: number
23 |   title: string
24 |   body: string
25 | }
26 | @Component
27 | export default class Article extends Vue {
28 |   public article: object = {}
29 |   @posts.State
30 |   public list!: Array<ArticleStructure>
31 | 
32 |   @posts.Action
33 |   public getPost!: (id: number) => Promise<object>
34 | 
35 |   created() {
36 |     this.getArticle(+this.$route.params.id)
37 |   }
38 | 
39 |   public getArticle(id: number): void {
40 |     this.getPost(id).then(data => {
41 |       this.article = data
42 |     })
43 |   }
44 | }
45 | </script>
46 | <style lang="scss" scoped>
47 | .banner-container {
48 |   width: 100%;
49 |   display: flex;
50 |   justify-content: center;
51 |   padding: 0 2rem;
52 |   .banner {
53 |     width: 100%;
54 |     height: 30rem;
55 |     object-fit: cover;
56 |     display: block;
57 |   }
58 | }
59 | .article-title {
60 |   font-size: 22px;
61 | }
62 | .article-description {
63 |   width: 60rem;
64 |   font-size: 16px;
65 |   margin: auto;
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="nav">
 3 |     <div>
 4 |       <router-link :to="{ name: 'home' }" tag="div" class="nav-text">
 5 |         Vue + TS Blog
 6 |       </router-link>
 7 |     </div>
 8 |     <div class="main-links">
 9 |       <router-link :to="{ name: 'home' }" tag="div" class="nav-item">
10 |         Home
11 |       </router-link>
12 |       <router-link :to="{ name: 'modify' }" tag="div" class="nav-item">
13 |         Edit / Delete
14 |       </router-link>
15 |       <router-link :to="{ name: 'create' }" tag="div" class="nav-item">
16 |         Create new
17 |       </router-link>
18 |     </div>
19 |   </div>
20 | </template>
21 | <script lang="ts">
22 | import { Vue, Component } from 'vue-property-decorator'
23 | @Component
24 | export default class Navbar extends Vue {}
25 | </script>
26 | 
27 | <style lang="scss" scoped>
28 | @import '@/assets/styles/responsive';
29 | .nav {
30 |   width: 100%;
31 |   height: 6rem;
32 |   background-color: #242424;
33 |   color: #fff;
34 |   display: flex;
35 |   align-items: center;
36 |   flex-wrap: wrap;
37 |   padding: 0 4rem;
38 |   justify-content: space-around;
39 |   @include respond(tab) {
40 |     min-height: 9rem;
41 |     padding: 0 1rem;
42 |   }
43 |   .nav-text {
44 |     padding: 0.5rem 0.5rem;
45 |     font-size: 2.4rem;
46 |     color: #fff;
47 |   }
48 |   .main-links {
49 |     display: flex;
50 |     align-items: center;
51 |     .nav-item {
52 |       padding: 0.5rem 2rem;
53 |       font-size: 2rem;
54 |       &:hover {
55 |         color: aquamarine;
56 |         cursor: pointer;
57 |       }
58 |       &.router-link-exact-active {
59 |         color: aquamarine;
60 |       }
61 |     }
62 |   }
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/views/ModifyBlog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <h1 class="page-title">Modify / Delete Articles</h1>
 4 |     <div class="card-container">
 5 |       <el-card
 6 |         v-for="post in list"
 7 |         :key="post.id"
 8 |         :body-style="{ padding: '0px' }"
 9 |         class="article"
10 |       >
11 |         <div class="overlay">
12 |           <el-button type="primary" @click="editArticle(post.id)">
13 |             Edit Article
14 |           </el-button>
15 |           <el-button type="danger" @click="deleteArticle(post.id)">
16 |             Delete Article
17 |           </el-button>
18 |         </div>
19 |         <img
20 |           src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg"
21 |           class="image"
22 |         />
23 |         <div class="title">
24 |           {{ post.title }}
25 |         </div>
26 |       </el-card>
27 |     </div>
28 |   </div>
29 | </template>
30 | <script lang="ts">
31 | import { Vue, Component } from 'vue-property-decorator'
32 | import { namespace } from 'vuex-class'
33 | const posts = namespace('posts')
34 | @Component
35 | export default class Home extends Vue {
36 |   mounted() {
37 |     this.getAllPosts()
38 |   }
39 |   @posts.State
40 |   public list!: Array<object>
41 | 
42 |   @posts.Action
43 |   public getAllPosts!: () => void
44 | 
45 |   @posts.Action
46 |   public deletePost!: (id: number) => void
47 | 
48 |   public editArticle(id: number) {
49 |     this.$router.push({ name: 'edit', params: { id: id.toString() } })
50 |   }
51 |   public deleteArticle(id: number) {
52 |     this.deletePost(id)
53 |   }
54 | }
55 | </script>
56 | <style lang="scss" scoped>
57 | a {
58 |   text-decoration: none;
59 |   font-style: none;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/views/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="create">
 3 |     <h1 class="page-title">{{ pageTitle }}</h1>
 4 |     <div class="form-container">
 5 |       <el-form label-position="top" :model="formData">
 6 |         <el-form-item label="Title">
 7 |           <el-input type="textarea" v-model="formData.title"></el-input>
 8 |         </el-form-item>
 9 |         <el-form-item label="Description">
10 |           <el-input type="textarea" v-model="formData.body"></el-input>
11 |         </el-form-item>
12 |         <el-form-item>
13 |           <el-button type="primary" @click="submitForm()">{{
14 |             pageTitle
15 |           }}</el-button>
16 |         </el-form-item>
17 |       </el-form>
18 |     </div>
19 |   </div>
20 | </template>
21 | <script lang="ts">
22 | import { Vue, Component } from 'vue-property-decorator'
23 | import { namespace } from 'vuex-class'
24 | import { Post } from '@/Interfaces/Posts'
25 | const posts = namespace('posts')
26 | @Component
27 | export default class ModifyItem extends Vue {
28 |   public pageTitle?: string = ''
29 |   public isNew?: boolean = true
30 |   public postId = 0
31 |   public formData: Post = {
32 |     title: '',
33 |     id: 0,
34 |     body: ''
35 |   }
36 | 
37 |   @posts.Action
38 |   public editPost!: (data: Post) => Promise<boolean>
39 |   @posts.Action
40 |   public createPost!: (data: Post) => Promise<boolean>
41 |   @posts.Action
42 |   public getPost!: (id: number) => Promise<Post>
43 | 
44 |   created() {
45 |     this.postId = +this.$route.params.id
46 |     if (!this.postId) {
47 |       this.pageTitle = 'Create new Article'
48 |     } else {
49 |       this.isNew = false
50 |       this.pageTitle = 'Modify Article'
51 |       this.getPost(this.postId).then(data => {
52 |         this.formData = data
53 |       })
54 |     }
55 |   }
56 |   public submitForm(): void {
57 |     if (this.isNew) {
58 |       this.createPost(this.formData)
59 |     } else {
60 |       this.formData.id = this.postId
61 |       this.editPost(this.formData)
62 |     }
63 |   }
64 | }
65 | </script>
66 | <style lang="scss" scoped>
67 | .form-container {
68 |   max-width: 80rem;
69 |   padding: 4rem;
70 |   margin: auto;
71 | }
72 | .el-button {
73 |   width: 100%;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >typescript</a
 27 |         >
 28 |       </li>
 29 |       <li>
 30 |         <a
 31 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 32 |           target="_blank"
 33 |           rel="noopener"
 34 |           >router</a
 35 |         >
 36 |       </li>
 37 |       <li>
 38 |         <a
 39 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
 40 |           target="_blank"
 41 |           rel="noopener"
 42 |           >vuex</a
 43 |         >
 44 |       </li>
 45 |       <li>
 46 |         <a
 47 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 48 |           target="_blank"
 49 |           rel="noopener"
 50 |           >eslint</a
 51 |         >
 52 |       </li>
 53 |       <li>
 54 |         <a
 55 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
 56 |           target="_blank"
 57 |           rel="noopener"
 58 |           >unit-jest</a
 59 |         >
 60 |       </li>
 61 |     </ul>
 62 |     <h3>Essential Links</h3>
 63 |     <ul>
 64 |       <li>
 65 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 66 |       </li>
 67 |       <li>
 68 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 69 |           >Forum</a
 70 |         >
 71 |       </li>
 72 |       <li>
 73 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 74 |           >Community Chat</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 79 |           >Twitter</a
 80 |         >
 81 |       </li>
 82 |       <li>
 83 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 84 |       </li>
 85 |     </ul>
 86 |     <h3>Ecosystem</h3>
 87 |     <ul>
 88 |       <li>
 89 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 90 |           >vue-router</a
 91 |         >
 92 |       </li>
 93 |       <li>
 94 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 95 |       </li>
 96 |       <li>
 97 |         <a
 98 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 99 |           target="_blank"
100 |           rel="noopener"
101 |           >vue-devtools</a
102 |         >
103 |       </li>
104 |       <li>
105 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
106 |           >vue-loader</a
107 |         >
108 |       </li>
109 |       <li>
110 |         <a
111 |           href="https://github.com/vuejs/awesome-vue"
112 |           target="_blank"
113 |           rel="noopener"
114 |           >awesome-vue</a
115 |         >
116 |       </li>
117 |     </ul>
118 |   </div>
119 | </template>
120 | 
121 | <script lang="ts">
122 | import { Component, Prop, Vue } from "vue-property-decorator";
123 | 
124 | @Component
125 | export default class HelloWorld extends Vue {
126 |   @Prop() private msg!: string;
127 | }
128 | </script>
129 | 
130 | <!-- Add "scoped" attribute to limit CSS to this component only -->
131 | <style scoped lang="scss">
132 | h3 {
133 |   margin: 40px 0 0;
134 | }
135 | ul {
136 |   list-style-type: none;
137 |   padding: 0;
138 | }
139 | li {
140 |   display: inline-block;
141 |   margin: 0 10px;
142 | }
143 | a {
144 |   color: #42b983;
145 | }
146 | </style>
147 | 


--------------------------------------------------------------------------------
/src/store/modules/posts.ts:
--------------------------------------------------------------------------------
  1 | import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
  2 | import { notify } from '@/utils/utils'
  3 | import api from '@/api'
  4 | import { Post } from '@/Interfaces/Posts'
  5 | 
  6 | @Module({ namespaced: true })
  7 | class Posts extends VuexModule {
  8 |   public list: Array<Post> = []
  9 |   public fetchedList = false
 10 |   public post: Post = {
 11 |     title: '',
 12 |     id: 0,
 13 |     body: ''
 14 |   }
 15 | 
 16 |   @Mutation
 17 |   public saveList(data: Array<Post>): void {
 18 |     this.fetchedList = true
 19 |     this.list = [...this.list, ...data.slice(0, 6)]
 20 |   }
 21 |   @Action
 22 |   public getAllPosts(): Promise<boolean> {
 23 |     if (this.fetchedList) {
 24 |       return Promise.resolve(true)
 25 |     } else {
 26 |       return api
 27 |         .get('/posts')
 28 |         .then(response => {
 29 |           this.context.commit('saveList', response.data)
 30 |           return true
 31 |         })
 32 |         .catch(() => {
 33 |           notify({
 34 |             title: 'Error',
 35 |             type: 'error',
 36 |             message: 'Could not fetch the list'
 37 |           })
 38 |           return false
 39 |         })
 40 |     }
 41 |   }
 42 | 
 43 |   @Mutation
 44 |   public save(data: Post): void {
 45 |     this.post = data
 46 |   }
 47 |   @Action
 48 |   public async getPost(id: number): Promise<Post | boolean> {
 49 |     if (this.list.length !== 0) {
 50 |       const fetched = await this.list.filter(item => {
 51 |         return item.id === id
 52 |       })
 53 | 
 54 |       if (fetched.length) {
 55 |         return Promise.resolve(fetched[0])
 56 |       } else {
 57 |         return Promise.reject(false)
 58 |       }
 59 |     } else {
 60 |       return api
 61 |         .get(`/posts/${id}`)
 62 |         .then(response => {
 63 |           this.context.commit('save', response.data)
 64 |           return response.data
 65 |         })
 66 |         .catch(() => {
 67 |           notify({
 68 |             title: 'Error',
 69 |             type: 'error',
 70 |             message: 'Could not fetch Article'
 71 |           })
 72 |           return false
 73 |         })
 74 |     }
 75 |   }
 76 | 
 77 |   @Mutation
 78 |   public edit(data: Post): void {
 79 |     this.list.map(item => {
 80 |       if (item.id === data.id) {
 81 |         item = data
 82 |       }
 83 |     })
 84 |   }
 85 |   @Action
 86 |   public async editPost(data: Post): Promise<boolean> {
 87 |     return api
 88 |       .put(`/posts/${data.id}`, {
 89 |         data
 90 |       })
 91 |       .then(() => {
 92 |         notify({
 93 |           title: 'Success',
 94 |           type: 'success',
 95 |           message: 'Successfully edited'
 96 |         })
 97 |         this.context.commit('edit', data)
 98 |         return true
 99 |       })
100 |       .catch(() => {
101 |         notify({
102 |           title: 'Error',
103 |           type: 'error',
104 |           message: 'Could not edit'
105 |         })
106 |         return false
107 |       })
108 |   }
109 |   @Mutation
110 |   public create(newPost: Post): void {
111 |     this.list.unshift(newPost)
112 |   }
113 |   @Action
114 |   public async createPost(data: Post): Promise<boolean> {
115 |     return api
116 |       .post('/posts', {
117 |         data
118 |       })
119 |       .then(response => {
120 |         notify({
121 |           title: 'Success',
122 |           type: 'success',
123 |           message: 'Successfully created an Article'
124 |         })
125 |         response.data.data.id = response.data.id
126 |         this.context.commit('create', response.data.data)
127 |         return true
128 |       })
129 |       .catch(() => {
130 |         notify({
131 |           title: 'Error',
132 |           type: 'error',
133 |           message: 'Could not create'
134 |         })
135 |         return false
136 |       })
137 |   }
138 | 
139 |   @Mutation
140 |   public delete(id: number): void {
141 |     this.list = this.list.filter(item => {
142 |       return item.id !== id
143 |     })
144 |   }
145 |   @Action
146 |   public async deletePost(id: number): Promise<void> {
147 |     return api
148 |       .delete(`/posts/${id}`)
149 |       .then(() => {
150 |         notify({
151 |           title: 'Success',
152 |           type: 'success',
153 |           message: 'Successfully deleted'
154 |         })
155 |         this.context.commit('delete', id)
156 |       })
157 |       .catch(() => {
158 |         notify({
159 |           title: 'Error',
160 |           type: 'error',
161 |           message: 'Could not delete'
162 |         })
163 |       })
164 |   }
165 | }
166 | export default Posts
167 | 


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