Learn Vuejs in practice from HTML / CSS to SSR with Nuxtjs

Learn Vuejs in practice from HTML / CSS to SSR with Nuxtjs

This repository is a practical tutorial to learn Vuejs and modern frontend frameworks. Learn Vuejs in practice from HTML / CSS to SSR with Nuxtjs

This repository is a practical tutorial to learn Vuejs and modern frontend frameworks.

This tutorial can be followed offline provided you meet the prerequisites and have downloaded this repository git clone [email protected]:Jeremie-Chauvel/apprendre-vuejs.git.

Prerequisite

To follow this tutorial it is necessary to have basic knowledge of HTML, CSS and Javascript, I will explain the advanced concepts.

If offline :

  • It is necessary to have a recent version of nodejs:
node --version
 ## v10 + recommended
  • it is necessary to have a recent version of npm:
npm --version
 ## 6+

If you do not know these tools, I explain the installation here

Topic

This training is practical, to do this we will build, exercise by exercise, a basic e-commerce application.

Start

To get started, start with the first section: Why use a frontend framework?

Contents

Introduction

  1. Why use a frontend framework?
  2. Why use the Vuejs framework?
  3. Start the e-commerce site project

Basic

  1. Getting started with Vue.js
  2. Declarative rendering
  3. Conditions and loops
  4. User input management
  5. Cut into reusable components
  6. Viewjs Basic Concepts Update

Develop a modern vuejs javascript application

  1. Why script tags are no longer enough
  2. What is a bundler?
  3. I use vue-cli directly to generate my project
  4. Single file component advantage for vuejs

The world of web applications: Single Page App

  1. What is a Single Page App (SPA) and what are its advantages?
  2. Rewrite our web page as a web application

Style and class

  1. Linking HTML Classes
  2. Linking HTML Styles

Vuejs instance base

  1. Data and methods
  2. Component lifecycle

Template syntax

  1. Interpolations (Filters)
  2. Guidelines
  3. V-if / v-show conditional rendering
  4. V-for list rendering
  5. Management of v-on events
  6. Bindings on v-model form fields

Calculated properties and observers

  1. Calculated properties
  2. Observers

Component in detail

  1. Props
  2. Slots
  3. Events
  4. Dynamic component

Vue-router routing

Vuex blind

  1. What is a store

SSR: Nuxtjs

? Translation

Appendices

  1. Install Node.js and NPM

Download Details:

Author: Jeremie-Chauvel

Source Code: https://github.com/Jeremie-Chauvel/apprendre-vuejs

vue vuejs nuxtjs html css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

Animated Vue.js logo using HTML and CSS

В этом видео сделаем логотип Vue.js используя HTML и CSS.