Vue 3 and Golang: A Practical Guide

Install go, create a main go file, declare the package, define the main function, import fmt, print hello world, and run with go run to see the output.

learn to use the fiber framework, an express-inspired Go framework, install it with go get version 1, and run a server on port 8000 to view localhost:8000.

Discover how variables and pointers operate in Go by declaring int and string values, initializing pointers, and printing values and addresses.

Learn to connect a Go application to a MySQL database using Gorm. Follow setup steps for MySQL community server and MySQL Workbench, and handle errors with two return values.

Create a database package with a Connect function and a controllers package with routes, export functions (capitalized), import and wire them into a fiber app, and start the server.

Create a Go user struct in a models directory with first name, last name, email, and password; expose a register endpoint that returns json, and test with postman.

Install the realize package with go get realize and configure it to watch file changes. The fiber server restarts automatically on edits, eliminating manual restarts and speeding up development.

Create a migration to build the user table with first name, last name, email, and password, then make the email unique with Gorm.

Register a user by parsing request data into map[string]string, handle errors succinctly, validate password and password confirm, and return 400 with a json message when passwords do not match.

Hash the password with the Decrypt package at cost 14, convert it to bytes, run migrations, and save the user by exporting the database handle and creating the user.

Implement a login function that handles a post request, queries user by email, validates the password, returns 404 not found or incorrect password, and prepares jwt token.

Generate a jwt token using go with hs256, set claims like issuer and expiration, sign with a secret, handle errors, and prepare to store the token in a cookie.

Create and set a HttpOnly cookie using Fiber to store a token, then enable cross-origin requests with CORS and allow credentials so the frontend can access the cookie.

Learn how to authenticate a user with jwt cookies, decode claims, and extract the issuer to fetch and return the user from the database.

Implement a logout function that clears the session by setting the cookie to empty and expiring it in the past, returning a simple success message.

Learn to customize json output for a user struct with tags that rename fields to lowercase. Omit the password and verify changes with a postman request.

Implement a fiber middleware to enforce authentication by validating a JWT cookie, returning unauthenticated when missing, and applying the protection to routes.

Create a user controller to perform CRUD operations, including fetching all users and creating new users with automatic password assignment, leveraging a database, models, and JSON responses.

Explore adding methods to a Go struct to set and hash passwords, compare passwords, and centralize the import of decrypt for clean, reusable user methods.

Develop a Go users CRUD API, adding get by id, list, update, and delete, with URL id extraction and string to unsigned int conversion.

Create a role model as a struct with unsigned id and name, add roles table, and implement roles controller with create, get, update, delete methods, testing with admin, Ed, viewer.

Explore how to model a one-to-one relationship between user and role using Gorm, add a foreign key, create and update users with role IDs, and preload roles for querying.

Create a permission model and controller, seed all permissions, and implement a many-to-many relationship with roles using a join table in Gorm.

Master creating and updating many-to-many relations between roles and permissions, including building role requests, converting permission IDs, posting and updating requests, and preloading role permissions.

Implement pagination by applying a limit and calculating offset from the page parameter. Return the user data slice, total user count, and last page for navigation.

Update user profile by using the info endpoint to modify the authenticated user's data and return the updated user as JSON, with password updates validated by password confirmation.

Define a product model with id, title, description, image, and price, expose it via json, and implement a product controller with create, get, update, and delete routes to manage items.

Implement interfaces in Go to separate models from the database and enable pagination for products and users using a generic entity with count and take methods.

Build an image upload flow with an image controller, posting to /upload using multipart/form-data, saving files to uploads folder, and serving them via a static route with a returned URL.

Build an orders system in Go with GORM, define order and order item models, use a foreign key, seed data, and preload items to fetch orders with items via controller.

Concatenate first and last names into a name. Compute the order total from item price times quantity using a gorm ignored total field and loop through orders and items.

export csv teaches creating a file path, generating a csv file of orders and their items, writing headers and data, and enabling a downloadable export via a post endpoint.

Master raw sql to fetch daily sales by joining orders and order items, summing totals, grouping by date, formatting the date, and returning a chart-ready json in the backend.

Implement a permission middleware for Vue 3 and Golang that checks a user's role and page permissions to allow view or edit access, returning unauthorized when needed.

Install Vue globally and create a new Vue project named view admin with TypeScript, Router, and Vue. Select defaults, then run the server to open on localhost:880.

Modify the view template by copying and pasting code, simplify the dashboard, remove unused files and styles, and apply the included style to establish the working template.

Learn how to split an email UI into components in Vue 3 by creating a NAV component with template, script and style, importing it and using it as a tag.

Create and wire dashboard and users pages in Vue 3 by configuring the router, using router-view and router-link, and highlighting the active page with an active class.

Explore building a register page in Vue 3 using the setup function, bind a reactive count with ref, and render updates automatically via v-model and template binding.

Explore creating a register form with scoped styles, refining the interface by removing labels and navigation, and using a wrapper 'rubber' component with child routes to render dashboard and users.

Submit a Vue 3 component with TypeScript, wire refs for first name, last name, email, password, and password confirm, and prevent default to log values.

Learn to register a user by installing axios, sending a post request to the register endpoint, and using async/await to extract and log the response data.

Create the login component and implement redirect after registration using useRouter to push the user to the login view.

learn how to build a login form in Vue 3 using reactive to group email and password, handle submission, and log credentials for debugging.

Learn to log in by posting to /api/login with credentials, enable axios defaults with credentials to access backend cookies, then retrieve the authenticated user and route to the dashboard.

Fetches the authenticated user through mounted hook with an axios get using credentials, uses the jwt to set the user name for navigation profile link, and prepares sign-out behavior.

Implement a logout function that calls the backend and redirects unauthenticated users to the login page using the router, guarding dashboard routes with a try-catch to require authentication.

Fetch and display all users in a Vue 3 app using TypeScript, unmounted, and axios, organizing a users folder and rendering id, name, email, and role from the data property.

Implement pagination in a Vue 3 and Golang project by managing a page state, wiring next and previous controls, and asynchronously loading users while respecting the last page limit.

Learn how to use watchers in Vue 3 to react to page changes, automatically load data, and trigger a function when the watched value updates.

Add a delete function for the Vue 3 table that accepts a user id with a confirmation prompt, and implement a TypeScript user model to mirror deletions in the array.

Build a user creation flow in Vue 3 and Golang with a user create component and form (first name, last name, email, role), posting to users and redirecting.

Update users by duplicating the create flow, building a user edit component, routing to /users/{id}/edit, preloading the form from the api, and submitting changes.

Manage roles in a Vue 3 TypeScript app by wiring a roles table with id, name, and action, fetching roles with axios and enabling delete and edit actions.

Create a Vue 3 role creation form with a create component and name and permission fields. Fetch permissions from an API, track selections, and submit a role with permission IDs.

Update roles by fetching roles, mapping permission IDs into a permission model, and toggling checked states. Use put requests to update roles and delete calls to remove them.

Add and manage products in the Vue 3 and Golang app by importing product data, displaying image, title, description, and price, and enabling delete and pagination on the products page.

Build a reusable paginator component in Vue 3, extracting next/prev logic and page state, accepting last page as a prop and emitting page changed events to update products and users.

Create a product form in a Vue 3 and Golang practical guide, handling title, description, image, and price with reactive data, Axios posting, and router push.

Learn to upload your own images by building an image upload component that uses a hidden file input, form data, and server requests to store and display the image.

Learn how to update products by prefilling a form with existing product data, then send a put request to update title, description, image, and price, including uploading a new image.

Implement orders feature in Vue 3 with TypeScript, including orders table with name, email, and total, data fetching, pagination, and rendering order items (title, quantity, price) via a view button.

Explore how to implement interactive animations in Vue 3 by toggling item visibility with a selected order id, using show and hide classes, max-height transitions, and overflow hidden.

Install c3 and types, configure a time-series bar chart with a date-based x axis and sales data, fetch data via axios, and bind it to the chart.

Create a profile page with two forms to update user info and password, prefill data from the authenticated user, and submit updates via axios in a Vue 3 app.

Learn how to manage a user in Vue 3 using Vuex, defining initial state, actions, and mutations, then dispatching updates and syncing state across components.

Explore organizing Vuex state with modules by building a user model in TypeScript, adding namespaces, and grouping mutations, actions, and state for scalable stores.