-
Current count (Vuex):
+
+ Current count (Vuex):
{{ currentCount }}
Increment
@@ -16,7 +17,7 @@ const namespace = 'counter'
@Component
export default class Counter extends Vue {
@Getter('currentCount', { namespace })
- private currentCount!: number;
+ private currentCount!: number
@Action('increment', { namespace })
private incrementCounter!: () => void
@@ -24,11 +25,11 @@ export default class Counter extends Vue {
@Action('reset', { namespace })
private resetCounter!: () => void
- private increment () {
+ private increment() {
this.incrementCounter()
}
- private reset () {
+ private reset() {
this.resetCounter()
}
}
diff --git a/ClientApp/src/plugins/axios.ts b/ClientApp/src/plugins/axios.ts
index 2fed3a1..7ecd17f 100644
--- a/ClientApp/src/plugins/axios.ts
+++ b/ClientApp/src/plugins/axios.ts
@@ -33,13 +33,13 @@ _axios.interceptors.response.use(
(error) => Promise.reject(error)
)
-function AxiosPlugin (vue: typeof Vue): void {
+function AxiosPlugin(vue: typeof Vue): void {
vue.prototype.$axios = _axios
}
declare module 'vue/types/vue' {
interface Vue {
- $axios: AxiosInstance;
+ $axios: AxiosInstance
}
}
diff --git a/ClientApp/src/registerServiceWorker.ts b/ClientApp/src/registerServiceWorker.ts
index 9991891..d4c0a4b 100644
--- a/ClientApp/src/registerServiceWorker.ts
+++ b/ClientApp/src/registerServiceWorker.ts
@@ -4,30 +4,28 @@ import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
- ready () {
+ ready() {
console.log(
'App is being served from cache by a service worker.\n' +
- 'For more details, visit https://goo.gl/AFskqB'
+ 'For more details, visit https://goo.gl/AFskqB'
)
},
- registered () {
+ registered() {
console.log('Service worker has been registered.')
},
- cached () {
+ cached() {
console.log('Content has been cached for offline use.')
},
- updatefound () {
+ updatefound() {
console.log('New content is downloading.')
},
- updated () {
+ updated() {
console.log('New content is available; please refresh.')
},
- offline () {
- console.log(
- 'No internet connection found. App is running in offline mode.'
- )
+ offline() {
+ console.log('No internet connection found. App is running in offline mode.')
},
- error (error) {
+ error(error) {
console.error('Error during service worker registration:', error)
}
})
diff --git a/ClientApp/src/shims-tsx.d.ts b/ClientApp/src/shims-tsx.d.ts
index 7ecd6a9..c656c68 100644
--- a/ClientApp/src/shims-tsx.d.ts
+++ b/ClientApp/src/shims-tsx.d.ts
@@ -1,13 +1,13 @@
import Vue, { VNode } from 'vue'
declare global {
- namespace JSX {
- // tslint:disable no-empty-interface
- interface Element extends VNode {}
- // tslint:disable no-empty-interface
- interface ElementClass extends Vue {}
- interface IntrinsicElements {
- [elem: string]: any;
- }
+ namespace JSX {
+ // tslint:disable no-empty-interface
+ interface Element extends VNode {}
+ // tslint:disable no-empty-interface
+ interface ElementClass extends Vue {}
+ interface IntrinsicElements {
+ [elem: string]: any
}
+ }
}
diff --git a/ClientApp/src/shims-vue.d.ts b/ClientApp/src/shims-vue.d.ts
index b93ce22..d9f24fa 100644
--- a/ClientApp/src/shims-vue.d.ts
+++ b/ClientApp/src/shims-vue.d.ts
@@ -1,4 +1,4 @@
declare module '*.vue' {
- import Vue from 'vue'
- export default Vue
+ import Vue from 'vue'
+ export default Vue
}
diff --git a/ClientApp/src/shims-vuetify.d.ts b/ClientApp/src/shims-vuetify.d.ts
index b88f945..9e73071 100644
--- a/ClientApp/src/shims-vuetify.d.ts
+++ b/ClientApp/src/shims-vuetify.d.ts
@@ -1,4 +1,4 @@
declare module 'vuetify/lib/framework' {
- import Vuetify from 'vuetify'
- export default Vuetify
+ import Vuetify from 'vuetify'
+ export default Vuetify
}
diff --git a/ClientApp/src/store/counter/actions.ts b/ClientApp/src/store/counter/actions.ts
index b0b8ace..7cba4c8 100644
--- a/ClientApp/src/store/counter/actions.ts
+++ b/ClientApp/src/store/counter/actions.ts
@@ -3,10 +3,10 @@ import { CounterState } from './types'
import { RootState } from '../types'
export const actions: ActionTree
= {
- increment ({ commit }) {
+ increment({ commit }) {
commit('incrementCounter')
},
- reset ({ commit }) {
+ reset({ commit }) {
commit('resetCounter')
}
}
diff --git a/ClientApp/src/store/counter/getters.ts b/ClientApp/src/store/counter/getters.ts
index f4b641b..2e48874 100644
--- a/ClientApp/src/store/counter/getters.ts
+++ b/ClientApp/src/store/counter/getters.ts
@@ -3,7 +3,7 @@ import { CounterState } from './types'
import { RootState } from '../types'
export const getters: GetterTree = {
- currentCount (state): number {
+ currentCount(state): number {
return state.counter
}
}
diff --git a/ClientApp/src/store/counter/mutations.ts b/ClientApp/src/store/counter/mutations.ts
index f78ff40..cd3c9cf 100644
--- a/ClientApp/src/store/counter/mutations.ts
+++ b/ClientApp/src/store/counter/mutations.ts
@@ -2,10 +2,10 @@ import { MutationTree } from 'vuex'
import { CounterState } from './types'
export const mutations: MutationTree = {
- incrementCounter (state) {
+ incrementCounter(state) {
state.counter++
},
- resetCounter (state) {
+ resetCounter(state) {
state.counter = 0
}
}
diff --git a/ClientApp/src/store/counter/types.ts b/ClientApp/src/store/counter/types.ts
index c830822..14354f7 100644
--- a/ClientApp/src/store/counter/types.ts
+++ b/ClientApp/src/store/counter/types.ts
@@ -1,3 +1,3 @@
export interface CounterState {
- counter: number;
+ counter: number
}
diff --git a/ClientApp/src/store/types.ts b/ClientApp/src/store/types.ts
index 6e99373..f7c8b7a 100644
--- a/ClientApp/src/store/types.ts
+++ b/ClientApp/src/store/types.ts
@@ -1,3 +1,3 @@
export interface RootState {
- version: string;
+ version: string
}
diff --git a/ClientApp/src/views/Counter.vue b/ClientApp/src/views/Counter.vue
index e77b229..46e71d4 100644
--- a/ClientApp/src/views/Counter.vue
+++ b/ClientApp/src/views/Counter.vue
@@ -5,7 +5,7 @@
Counter
This is a simple example of a Vue.js component test integrated with Vuex
-
+
diff --git a/ClientApp/src/views/FetchData-decorator.vue b/ClientApp/src/views/FetchData-decorator.vue
index a7926b5..a180aa4 100644
--- a/ClientApp/src/views/FetchData-decorator.vue
+++ b/ClientApp/src/views/FetchData-decorator.vue
@@ -27,22 +27,17 @@
-
+
This is an error alert.
-
- Are you sure you're using ASP.NET Core endpoint? (default at http://localhost:5000)
- API call would fail with status code 404 when calling from Vue app (default at http://localhost:8080) without devServer proxy settings in vue.config.js file.
+
+ Are you sure you're using ASP.NET Core endpoint? (default at
+ http://localhost:5000)
+ API call would fail with status code 404 when calling from Vue app (default at
+ http://localhost:8080) without devServer proxy
+ settings in vue.config.js file.
-
@@ -53,18 +48,18 @@ import { Forecast } from '../models/Forecast'
@Component({})
export default class FetchDataView extends Vue {
- private loading = true;
- private showError = false;
- private errorMessage = 'Error while loading weather forecast.';
- private forecasts: Forecast[] = [];
+ private loading = true
+ private showError = false
+ private errorMessage = 'Error while loading weather forecast.'
+ private forecasts: Forecast[] = []
private headers = [
{ text: 'Date', value: 'date' },
{ text: 'Temp. (C)', value: 'temperatureC' },
{ text: 'Temp. (F)', value: 'temperatureF' },
{ text: 'Summary', value: 'summary' }
- ];
+ ]
- private getColor (temperature: number) {
+ private getColor(temperature: number) {
if (temperature < 0) {
return 'blue'
} else if (temperature >= 0 && temperature < 30) {
@@ -74,11 +69,11 @@ export default class FetchDataView extends Vue {
}
}
- private async created () {
+ private async created() {
await this.fetchWeatherForecasts()
}
- private async fetchWeatherForecasts () {
+ private async fetchWeatherForecasts() {
try {
const response = await this.$axios.get('api/WeatherForecast')
this.forecasts = response.data
diff --git a/ClientApp/src/views/FetchData.vue b/ClientApp/src/views/FetchData.vue
index 74cd855..2ddb3af 100644
--- a/ClientApp/src/views/FetchData.vue
+++ b/ClientApp/src/views/FetchData.vue
@@ -33,13 +33,11 @@
Are you sure you're using ASP.NET Core endpoint? (default at
- http://localhost:5000)
+ http://localhost:5000)
- API call would fail with status code 404 when calling from Vue app
- (default at
- http://localhost:8080)
- without devServer proxy settings in vue.config.js file.
+ API call would fail with status code 404 when calling from Vue app (default at
+ http://localhost:8080) without devServer proxy
+ settings in vue.config.js file.
@@ -50,7 +48,7 @@ import Vue from 'vue'
import { Forecast } from '../models/Forecast'
export default Vue.extend({
- data () {
+ data() {
return {
loading: true,
showError: false,
@@ -65,7 +63,7 @@ export default Vue.extend({
}
},
methods: {
- getColor (temperature: number) {
+ getColor(temperature: number) {
if (temperature < 0) {
return 'blue'
} else if (temperature >= 0 && temperature < 30) {
@@ -74,7 +72,7 @@ export default Vue.extend({
return 'red'
}
},
- async fetchWeatherForecasts () {
+ async fetchWeatherForecasts() {
try {
const response = await this.$axios.get('api/WeatherForecast')
this.forecasts = response.data
@@ -85,7 +83,7 @@ export default Vue.extend({
this.loading = false
}
},
- async created () {
+ async created() {
await this.fetchWeatherForecasts()
}
})
diff --git a/ClientApp/src/views/Home.vue b/ClientApp/src/views/Home.vue
index 4f451e7..a710f70 100644
--- a/ClientApp/src/views/Home.vue
+++ b/ClientApp/src/views/Home.vue
@@ -1,58 +1,95 @@
- 
-
+
+
Hello, world!
- Welcome to your new single-page application, built with:
+ Welcome to your new single-page application, built with:
-
ASP.NET Core and
- C# for cross-platform server-side API code
+
+ C#
+
+ for cross-platform server-side API code
+
+ - Vue.js for client-side code
-
- Vue.js for client-side code
+ Vue CLI for building, bundling
+ and adding or removing vue plugins
+
-
- Vue CLI for building, bundling and adding or removing vue plugins
+ Webpack internally used by Vue
+ CLI
+
-
- Webpack internally used by Vue CLI
- -
- Vuetify for layout and styling
+ Vuetify for layout and styling
+
To help you get started, we've also set up:
-
- Client-side navigation. For example, click Counter then Back to return here.
+ Client-side navigation. For example, click Counter then
+ Back to return here.
+
-
- Development server integration. In development mode, the development server from
-
vue-cli-service runs in the background automatically, so your client-side resources are dynamically built on
- demand and the page refreshes when you modify any file.
+ Development server integration. In development mode, the development
+ server from vue-cli-service runs in the background automatically, so your
+ client-side resources are dynamically built on demand and the page refreshes when you
+ modify any file.
+
-
- Efficient production builds. In production mode, development-time features are disabled, and the
-
webpack build tool produces minified static CSS and JavaScript files.
+ Efficient production builds. In production mode, development-time
+ features are disabled, and the webpack build tool produces minified
+ static CSS and JavaScript files.
+
Integrated Vue plugins:
-
- Vue.js - reactive, component-oriented view layer for modern web interfaces.
+ Vue.js - reactive, component-oriented
+ view layer for modern web interfaces.
+
-
- Vuetify - a reusable semantic component framework for Vue.js.
+ Vuetify - a reusable semantic
+ component framework for Vue.js.
+
-
- Class Component - ES201X/Typescript class decorator for Vue components.
+
+ Class Component
+
+ - ES201X/Typescript class decorator for Vue components.
+
-
- Property Decorator - property decorators for Vue components
+
+ Property Decorator
+
+ - property decorators for Vue components
+
-
- Router - official router for Vue.js 2
+ Router -
+ official router for Vue.js 2
+
-
- Vuex - state management for Vue.js
+ Vuex - state
+ management for Vue.js
+
-
- Register Service Worker - script for registering service
- worker with hooks for common events to simplify PWA development.
+
+ Register Service Worker
+
+ - script for registering service worker with hooks for common events to simplify PWA
+ development.
+