Nuxt.js from scratch - 20 episodes

  • Home>
  • Blog>
  • Nuxt.js from scratch - 20 episodes

Playlist from all 20 episodes: https://www.youtube.com/playlist?list=PLOICX-WjKEZe85LsS1UnQScl4Qv_cQsnC

From April 11 to May 31, he did a series of live broadcasts on his youtube channel about a significant update of the current site. In total, it turned out about 37 hours of video. But I advise you to watch at least at a speed of 1.5x, but you can watch the video at 2x acceleration. Save your time :)

Such videos will be useful for those who are just starting to get acquainted with the Nuxt framework.js and wants to see how it can be used to make not a theoretical project, but a real website. By the way, you are on it now. Enjoy watching!

1. What is Nuxt.js + installation.

  • 00:00 Youtube Bug
  • 03:43 The beginning of the pro Nuxt.js
  • 05:04 What is Nuxt.js
  • 05:50 Sites that use Nuxt.js
  • 13:15 Server side rendering
  • 19:35 Other work options Nuxt.js
  • 23:20 Preparation with installation Nuxt.js
  • 25:30 Example of the "Blog" model in mongoose
  • 33:20 What's wrong with the current site
  • 37:58 Fetch in version Nuxt.js 2.12
  • 41:53 The software installation process before Nuxt.js
  • 49:35 Installation Nuxt.js
  • 01:01:16 Opening the folder with the Nuxt project.js in VS Code
  • 01:01:39 Project structure Nuxt.js
  • 01:04:49 Launch Nuxt.js
  • 01:14:00 Final

2. SEO + basic settings and plugins.

  • 00:00 Introduction
  • 04:25 Site analysis using SEO Spider
  • 06:27 Site encoding
  • 07:11 Server response code
  • 08:02 301 redirect
  • 11:01 We take into account the recommendations of search engines
  • 12:14 Possibility of indexing pages
  • 18:45 Title, Description, H1
  • 23:56 About the importance of SEO
  • 28:30 Page addresses
  • 42:30 How to add Title and Description on a page in Nuxt.js
  • 48:00 Enabling style.css for the entire site in nuxt.config.js
  • 59:05 Canonical meta tag
  • 01:15:58 Example of duplicates of site pages on Bitrix
  • 01:23:07 Adding Canonical to the template Nuxt.js
  • 01:30:55 Open Graph meta tags for social networks
  • 01:32:46 Diagram.org
  • 01:36:10 Installing Yandex.Metrica in Nuxt.js
  • 01:45:00 Installing the sitemap-module
  • 02:11:40 End

3. Header component.

  • 00:00 Start
  • 05:17 Creating pages and sections
  • 12:27 Creating and connecting the Header component
  • 18:10 HTML content of the site header
  • 31:52 CSS design of the site header
  • 35:55 Connecting fonts
  • 38:25 Layout of the navigation menu
  • 40:48 Highlighting the current nuxt-link-exact-active link
  • 48:03 Layout of the right part of the site header
  • 01:05:15 Applying basic styles to the main block
  • 01:06:30 Creating a template for the main page
  • 01:08:02 Assigning templates to pages
  • 01:11:30 Total

4. Backend and models in Mongoose.

  • 00:00 Start
  • 02:20 Prettier for VS Code
  • 02:50 Installing and configuring mongoose
  • 10:30 Backend structure on the example of pages with services
  • 16:09 Basic route for processing a GET request
  • 21:20 Creating a Service model
  • 27:57 Route to create a Service
  • 33:00 Form for creating Services from the frontend
  • 57:20 then() after executing the request
  • 01:01:27 Getting all Services by the GET method
  • 01:06:13 v-for for an array with data
  • 01:13:40 Total

5. Transferring old models to a new site.

  • 00:00 Introduction
  • 04:00 What I did on the last broadcast
  • 07:10 Transferring data from MongoDB database
  • 10:05 Current models
  • 15:25 Loading the old database into a new project
  • 31:45 Connecting old models
  • 36:43 Transferring old routes and installing software
  • 39:28 Data output from the database on the frontend
  • 57:00 Blog layout
  • 01:08:32 Creating a page and route for a single entry
  • 01:14:23 Bread crumbs
  • 01:20:33 html content output inside the blog page
  • 01:21:42 Total

6. Output of records from MongoDB.

  • 00:00 Introduction
  • 01:44 Dynamic pages _id.vue
  • 13:45 Layout of the blog page
  • 32:23 The "Share" block from Yandex
  • 35:35 About a camera as a webcam
  • 41:41 Connecting scripts on the page
  • 46:14 Transferring scripts from head to body
  • 51:46 Date formatting with nuxt-date-fns
  • 01:07:58 Choosing a module for comments
  • 01:19:13 Total

7. Tagging and pagination.

  • 00:00 Start
  • 00:59 Blog entry tags
  • 04:38 Creating pages for tags
  • 06:50 Filtering data via tag
  • 11:06 Creating a tag menu
  • 16:28 Backend implementation of the filter by tag
  • 18:37 Adding data to the axios request header
  • 28:26 Back to the backend
  • 41:53 Layout of the tag menu
  • 48:20 Pagination on the backend
  • 56:20 Pagination on the frontend
  • 01:18:33 Hiding the Next button on the last page
  • 02:10:37 Processing of incorrect pagination requests
  • 02:23:18 Problem with returning to the first page

8. Pagination and creation of a side column of the site.

  • 00:00 Switched from webcam to camera
  • 12:00 Solving the pagination reset problem
  • 17:20 Styles for pagination buttons
  • 22:13 Finishing pagination for sections with tags
  • 01:26:26 Data output for the side column of the blog
  • 01:39:21 Layout of the side column

9. Layout of the main page and slider.

  • 00:00 Start
  • 02:00 About fetch and asyncData
  • 14:38 Selection of blog entries on the main page
  • 28:22 Layout of the first screen of the main page
  • 41:44 Layout of the block with UTP
  • 01:00:36 Slider selection
  • 01:07:05 Installing vue-awesome-swiper
  • 01:10:17 Creating a slider on the main page
  • 01:17:55 Slider layout

10. Site layout.

  • 00:00 Start with technical problems
  • 02:10 Layout of the block with logos
  • 09:20 Preparation of logos for filling on the website
  • 16:00 Comparison of tinypng and photoshop compression quality
  • 24:40 Adding logos to the website
  • 30:10 Installing nuxt-lazy-load
  • 39:47 Layout of the block about live broadcasts
  • 48:44 Making a fixed site header
  • 01:04:07 Footer layout
  • 01:26:45 Total

11. Adding entries to MongoDB and uploading images.

  • 00:00 Start
  • 02:30 Creating a Service model
  • 11:28 Routes in Express for services
  • 21:07 Creating a frontend page for one service
  • 34:30 Sending requests via Postman
  • 39:11 Publishing services from the frontend
  • 01:08:44 File upload (with an error, see the following. stream)
  • 01:33:24 Selecting a visual text editor
  • 01:38:27 Adding services to the database

12. Editing records in the database.

  • 00:00 Start WITHOUT SCREEN
  • 00:40 Error in the last broadcast about downloading files WITHOUT a SCREEN
  • 03:17 About components WITHOUT A SCREEN
  • 15:23 TURNED ON THE SCREEN!!!
  • 15:40 Once again about the components
  • 16:40 Editing services from the frontend
  • 01:15:05 Removal of the service
  • 01:37:04 Update of the image attached to the service
  • 02:23:06 Total

13. Async fetch, components and cases.

  • 00:00 Start
  • 01:00 Example of async fetch
  • 05:17 Output of components in services with vue-multiselect
  • 24:50 Section with cases
  • 27:50 Creating a Case model
  • 35:52 Creating routes on the backend for cases
  • 42:38 Creating cases on the frontend
  • 52:30 Installing and configuring TinyMCE
  • 01:26:41 Total

14. Price list, tags and contact layout.

  • 00:00 Current state of the site
  • 01:33 Showing the finished section with cases
  • 08:52 Sending 2 separate images via the form
  • 13:48 Sending an array via vue-multiselect
  • 17:14 Admin panel for case editing
  • 19:00 Updates in the Blog section
  • 24:48 Output of a table with a dynamic price list
  • 38:20 Tag output in cases
  • 01:07:03 Page layout Contacts
  • 02:19:15 Adding directions from Yandex.Maps

15. Forms and validation.

  • 00:00 Start
  • 01:20 Changes on the website
  • 02:28 Site search
  • 08:44 Bread crumbs + data transfer to the component
  • 11:05 Component with the Share block from Yandex
  • 13:35 Wiki internal page code
  • 16:06 Feedback form
  • 22:27 Sending form data to the mail via Nodemailer
  • 34:36 Validation of Vee-Validate 3
  • 42:32 Examples of rules for data validation
  • 48:40 Removal of the feedback form into a separate component
  • 01:05:21 Layout of the feedback form
  • 01:40:19 Making the form header dynamic

16. Mobile version and PWA.

  • 00:00 Start
  • 01:00 Preparing for the layout of the vertical mobile version
  • 03:30 Showing the layout of the old version of the site
  • 05:23 Options for fixing the menu
  • 06:10 I continue to adapt to the layout of the mobile version
  • 07:45 Layout of the vertical mobile version
  • 11:23 Adding a hamburger for navigation
  • 36:24 Functionality for showing and hiding menus
  • 57:02 Layout of the main page
  • 01:12:08 I'm telling you about my router and wi-fi adapter)
  • 01:15:05 Continuation of the layout of the main page
  • 01:21:47 Installing and configuring Nuxt PWA
  • 01:46:07 Collapsing the menu after clicking on the link

17. Site admin panel.

  • 00:00 Start
  • 01:13 Admin menu
  • 03:00 Backend validation of url uniqueness
  • 05:30 Transliteration of h1 to the correct page address
  • 10:10 Validation of data in the admin form
  • 13:45 File upload validation (Vee-Validate bug)
  • 33:00 Component and store admin menu
  • 49:32 Installing and configuring nuxt toast notifications

18. Authorization of Nuxt-auth and JWT token.

  • 00:00 Start
  • 00:40 Current changes on the site
  • 03:00 Replacing window.location.reload with a normal data update
  • 06:50 Connecting components in a different way for code splitting
  • 08:42 Changes in CSS files
  • 13:30 Installing Nuxt-auth
  • 14:40 How is generated sitemap.xml with dynamic urls
  • 18:16 Setting up Nuxt-auth
  • 21:58 Login form
  • 39:45 Processing requests from the login form
  • 01:01:30 Creating a bearer token
  • 02:07:18 Decrypting the token and sending the user
  • 02:38:38 What should I do next for authorization

19. The end of authorization, the deployment on VDS + a lot of useful little things.

  • 00:00 Start
  • 01:37 What authorization is needed for
  • 03:36 Protection of routes on the backend
  • 07:24 Token validity time limit
  • 12:45 Login and password verification
  • 16:20 Additional methods for site protection
  • 20:05 nuxt-env is visible on the front by default
  • 21:55 Showing the final package.json
  • 24:10 Nuxt-auth Logout
  • 28:32 Template for pages with errors, for example 404
  • 29:50 Helmet for Express JS
  • 34:07 Uploading images to TinyMCE
  • 43:00 Nuxt build analyzer
  • 45:58 Connecting plugins and components
  • 47:10 MS Word document generation
  • 52:50 Hydration data
  • 01:06:15 Deployment (transfer of the site/program) to VDS
  • 01:16:56 Adding Nuxt PWA to Google Play
  • 01:19:40 What will happen next?

20. The final. A complete overview of the project.

  • 00:00 Start
  • 03:22 Project launch
  • 04:47 Nuxt.config.js
  • 05:43 Universal operating mode
  • 06:35 General section Head
  • 09:35 Enabling Vee-Validate 3 validation
  • 10:20 Sending the form to the mail from Nodemailer
  • 12:15 Implementation of 301 redirects
  • 13:52 Working with dates date-fns
  • 15:11 Nuxt PWA
  • 16:40 Sending requests via Axios
  • 18:17 Generation sitemap.xml
  • 20:55 Nuxt http + async fetch
  • 22:17 toast notifications
  • 23:30 Nuxt-auth authorization
  • 27:07 Delayed loading of Nuxt-lazy-load content
  • 28:50 Connecting Yandex.Metrica
  • 29:21 Local authorization strategy Nuxt-auth
  • 30:31 Axios proxy for deployment
  • 31:16 Validation Settings Vee-Validate 3
  • 32:48 Package.json
  • 32:51 TinyMCE Visual Editor
  • 33:23 Uploading images via TinyMCE
  • 36:53 Document generation via file-saver
  • 40:05 Mongoose + models
  • 43:36 Slider vue-awesome-swiper
  • 47:59 Vue-multiselect
  • 51:08 Admin panel and breadcrumbs components
  • 52:10 Markup Schema.org for bread crumbs, services and organizations
  • 54:55 Components: customer logos, form submission, slider, price comparison
  • 56:04 Selection of components to display on service pages
  • 57:17 Connecting the "Share" block from Yandex (forgot to specify body:true)
  • 58:32 Site search
  • 01:01:28 Header and footer components
  • 01:02:40 Url transliteration script
  • 01:03:45 Site layouts templates
  • 01:05:58 Pages of the site pages
  • 01:07:53 Showing all bundles via npx nuxt build -a
  • 01:08:43 Continued through the pages of the site
  • 01:15:50 Backend
  • 01:16:42 Folder with static files static
Author: Aleksandr Dergunov
Published: 6/1/2020