The main objectives of this article are:
Next, remove the default CSS in the 'src/assets/main.css'.
- Vue(3.0)
- Vue(3.0) Composition API.
Vue(3.0):
Vue(3.0) is a javascript framework for creating a single-page application. Vue application built by components. The components are the smallest unit of the application which comprises 'Script', 'Template'(HTML), and 'Style'. Eventually, multiple components together create the Vue application.
Vue(3.0) Composition API:
VueJS application can be developed with either 'Options API' or 'Composition API' or 'Both combinations'. Using composition API we can import the functions(vue functions) instead of declaring them as options
The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of composable functions.
Example Vue Component - Composition API Technique 1:
<script> import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() { state.count++ } // don't forget to expose the function as well. return { state, increment } } } </script> <template> <button @click="increment"> {{ state.count }} </button> </template>
- Here this one way of writing the Vue with Composition API. Here we implement 'Setup()' a default function of 'vue' inside it we implement our logic. Here variables like 'state' and functions like 'increment()' must be returned from the 'setup()' method so then those return values can be used in our HTML template.
<script setup> import { reactive } from 'vue' const state = reactive({ count: 0 }) function increment() { state.count++ } </script> <template> <button @click="increment"> {{ state.count }} </button> </template>
- In the previous technique, we defined the 'setup' method and then return properties and functions. In this approach, we no need to define the 'setup' method and expose the props manually. In this approach just define the 'setup' as an attribute for the 'script' tag and then we can just write normal javascript code by importing required vue functions.
Create Vue(3.0) Application:
To create a VueJS application our local machine should contain NodeJS. So go to "https://nodejs.org/en/download/" and download the Node.
Command to create the VueJS application
npm init vue@latest
On running the above command we have to choose a few options before creating a vue application, in those options we can choose the default option as 'NO', but for the routing option select 'Yes' like below.
The IDE we are going to use for the development is the 'Visual Studio Code' editor. So go to "https://code.visualstudio.com/" and then download.
Now open our vue application in 'Visual Studio Code' editor and then run the 'npm install' command to install all the required packages.
Let's explore the project default files&folder structure:
package.json - the 'package.json' file contains package references, commands, etc.
index.html - the 'index.html' file is the only HTML file of our vue application. It contains a 'div' element with 'id' value 'app', so inside of this element our components get rendered.
main.js - entry js file.
App.vue - entry vue component.
views(folder) - contains vue components that act as individual pages.
router(folder) - contains js file which contains logic for our vue application.
components(folder) - contains vue components that can be used as child components mostly.
assets(folder) - contains static files like images.
Run the below command to start the VueJs application under the local server.
npm run dev
Configure Bootstrap Menu:
In the 'index.html' page add the bootstrap CSS file and JS file references.
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" /> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous" ></script> </body> </html>
- (Line: 8-13) Bootstrap CSS reference.
- (Line: 18-22) Bootstrap JS reference.
Now in the 'App.vue' component let's add the bootstrap menu.
src/App.vue:
<script setup> import { RouterView } from "vue-router"; </script> <template> <nav class="navbar bg-primary" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Beautiful Beaches</a> </div> </nav> <div class="container"> <RouterView /> </div> </template> <style scoped> </style>Now if we run the application we can observe the bootstrap menu.
Next article, we are going to create the .NET 7 Web API.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on the .NET 7 Web API and Vue(3.0) application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-1 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-3 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-3 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-5 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-6 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Part-6 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example
Comments
Post a Comment