Steps to create a rich text editor using HTML, CSS typescript, javascript in vuejs app.
API creation using dotnet core web API, and data stored to SQL Server.

Video Tutorial

Create your first web application using Vue js and Vue CLI.

Video Tutorial

Create a dashboard for your app using the apex chart in an easy way.
Video Tutorial

1) Vuejs
2) VueCLI
3) Typescript
4) Apexchart

Suppose you have a grid/ table and you need filter the items in the table based on the input text you enter in the search field. This can be achieved very easily using vuejs

Your input field should look like this

 <input type="text" v-model="filterKey" 
 placeholder="please type the inventroy name you wish to search" />

Here in v-model we are binding the filter key so we can pass that value to the filter method for filtering

You can load the data to the table either using the hard coded models/from your backend apis
Your table should look like this

<table>
   <thead>
   <tr>
     <th v-for="(header,index) in Header" :key="index">
      {{header.name}}
     </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(data, index) in Filter" :key="index" >
      <td>{{data.name}}/td>
      <td>{{}}</td>
      <td>{{}}</td>
    </tr>
  </tbody>
</table> 

Here the Filter  method in the tr v-for is a computed property it will fetch the filtered data.

public get Filter() {
  if (this.filterKey.length > 0) {
  let data: any = [];
  data =  this.data.filter((rowItem: any) => {
   return rowItem.name.toLowerCase().indexOf(this.filterKey.toLowerCase()) !== -1;
  });
  return data;
  } else {
  return this.data;
  }
}

Here the this.data is the grid data needs to be loaded from api  or hard coded one. I am loading it from the backend api call so not adding it here.

The filter input what user enters we are comparing with each array items and checking if it exists then returning it.

We can use DI in vuejs application by very simple way, using the @Provide and @Inject property decorator.So here is the scenario you have a service and you need the instance of the same in different component in normal way you have to create the instance of the same in different components and use it there.

But using DI you can use the @Provide property decorator and declare it in your App.vue and then you can reuse it in the components wherever you want by using the @Inject property decorator

In App.vue

    import {Component, Provide, Vue} from 'vue-property-decorator';
    @Component({
    })
    export default class App extends Vue {
           @Provide('vueApiServices')
           public vueApiServices = new VueApiServices();
     }

In your corresponding component

import { Vue, Prop, Component, Inject } from 'vue-property-decorator';
import {VueApiServices} from '../../services/VueApiServices';
@Component({
    components: {},
})
export default class InventoryDetailsComponent extends Vue {

@Inject('vueApiServices')
private vueApiService!: VueApiServices;
}

If your looking for a template project for Vue Cli integrated with moviedb you can find it in below git hub repository.

https://github.com/tonytomk/moviemaniac

You can get the api key from movie db by registering there.

In the above github code you need to replace the key in the moviecomponent.

Technologies used : vuejs,typescript,vuecli,bootstrap