Build a Simple CRUD App with ASP.NET Core and Vue

Build a Simple CRUD App with ASP.NET Core and Vue

This tutorial walks you through building a basic CRUD application with ASP.NET Core and Vue.js.

Keith Lewis

I was going through this and got an error: ‘FoodRecords is not an Object’. Going through the code I determined an issue with the code. You never import the FoodRecords component in your router/index.js. The following needs to be added to router/index.js:

import FoodRecords from ‘@/components/FoodRecords’

Keith Lewis

Additionally, when it tries to do the okta auth, I am directed to

{my_Okta_Domain}/oauth2/default/v1/authorize?client_id={my_Client_ID}&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fimplicit%2Fcallback&response_type=id_token token&response_mode=fragment&state={state}&nonce={nonce}&scope=openid profile email 

and receive a 400 ‘Bard Request’ error. I have white-listed

Keith Lewis

I noticed some issues with the FoodRecords.vue. your code shows the b-alert element with an extra space between the colon and show but it should look like this:

<b-alert :show=“loading” variant=“info”>Loading…</b-alert>

This also happens in b-card element between colon and title where it should be:

<b-card :title="( ? ‘Edit Food ID#’ + : ‘New Food Record’)">

and in the tr for the table where it should be:

<tr v-for=“record in records” :key=“”>


Hi Ibrahim Šuta, how to up vue and core to hosting together?

Deveron Crawford

Namespaces! Why are they not included in your sample code? It took me a while (3 days, in fact) to realize that FoodRecords.cs should have “using System;” before the class declaration, and Startup.cs needs

using AspNetCore.Controllers;
using Microsoft.EntityFrameworkCore;

to resolve all of it’s references.


Great article, thanks for this. I have one problem with the demo project I’m not sure how to solve. I added meta: { requiresAuth: true } to the / route. When I’m logged out and navigate to localhost, my app fully loads and appears in the browser for a split second before being redirected to the Okta login page. How can I prevent any rendering from occurring before redirect?

Mika Gouzee


Thanks for the work. Interesting. Just a question : in the appsettings for the aspnetcore app, you wrote a ClientSecret line. However, when configurated as a SPA, there’s no Client Secret to be found in Okta’s configuration.
Could you provide more explanation here ? is it something that changed recently, or were you distracted ?



The SPA app uses the implicit flow for authentication and doesn’t require a client secret. The newer guidance would be to look at the Auth Code flow with PKCE like Mobile apps do.…

Hope this helps!

Philipp Grigoryev

Weird thing, when I try to open FoodTracker page, it comes empty. Not sure how to troubleshoot a possible issue. npm doesn’t show any issues while running…


All you should need in trusted origins is http://localhost:8080 which should be added automatically for you when you create the application in Okta. is http://localhost:8080 not in your trusted origins?

Keith Lewis

this is what shows: https://uploads.disquscdn.c…

I don’t know if the trailing Implicit.callback is waht is causing it or not, and I don’t have this stood up any more. Some point soon, I will look and see if I can find the time to stand it back up.

mihai vancsa

hei, i get this error: The type or namespace name ‘JwtBearer’ does not exist in the namespace ‘Microsoft.AspNetCore.Authentication’
Can someone help me with it?


Just run this in terminal:
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer --version 3.0.0

Eric Brown


you say
Inside of your main folder food-records navigate to AspNetCore folder and run the following:

I don’t have a food-records folder, I’ve been following till then, can you give more context?

Fabian Rhoda

What about rolebased authorization in the ModelController in Core? Something linke [Authorize(Role=“Admin”)] instead of simple [Authorize] annotation?

vinod patil

From where you copied the client secretkey in appsetting.json??