Vue.js

Django Infinite Scroll - Vue and Django Rest Framework tutorial

Code With Stein / Jun 28, 21 / 0 comments

Learn how to use Django and Vue to make it possible to load new data when you reach the bottom of the screen.

Django and Vue web app for creating and sending pdf invoices

Code With Stein / Feb 15, 21 / 1 comments

In this brand new tutorial series I will show you how to build a web app where users can sign up, create clients, generate pdf invoices and send them.

Building a todo app using Vue and Django (Django rest framework)

Code With Stein / Dec 15, 20 / 1 comments

In this Django and Vue.js tutorial we'll be building a simple todo app. This is a trivial thing to do when you know a programming language, but it's also a great way to learn many of the key concepts of programming.

Code With Stein / Nov 27, 20 / 2 comments

This is part 2 of this series. In this part, we will make it possible for users to sign up, log in and log out. Plus a few other things.

Code With Stein / Nov 25, 20 / 0 comments

This is part 1 of this series. In this part, we will install some software and set up our environment. I will also create a Django app and some templates. The templates will be used for the front page, terms of service, privacy policy and plans.

Building a time tracking SaaS using Django and Vue - Pre release

Code With Stein / Nov 21, 20 / 0 comments

I'm soon ready to start publishing videos for my upcoming series "Building a time tracking SaaS using Django and Vue". In this post, you'll get to see a pre release video with information about it.

Code With Stein / Nov 12, 20 / 0 comments

Often you want to validate a form before you send data to the backend. Here is a short guide on how to do this using Vue.

Code With Stein / Oct 20, 20 / 0 comments

With Slots you can make it possible to structure the content of a component in a semantic way, and the parent component can control the contents of them.

Code With Stein / Oct 19, 20 / 0 comments

Filters are justed to apply formatting and transformations to values used in a template interpolation. You include filters in you components and you can use them on all dynamic data. The underlying data will not be change, just the way they are presented on the screen.

Code With Stein / Oct 18, 20 / 0 comments

Vue.js computed properties helps you to make computations and changes to your data variables.

Code With Stein / Oct 17, 20 / 0 comments

When you're working with Vue.js you often need to run a function when a certain value changes. Vue.js watchers helps you with that.

Code With Stein / Oct 16, 20 / 0 comments

Props are used to pass data from a component to another. In this post we will go through how you can pass strings, objects and other data types.

Code With Stein / Oct 15, 20 / 0 comments

When you're building a Vue.js app you often need to send information from a component to another, here is how you do that.

Code With Stein / Oct 10, 20 / 6 comments

Django and Vue.js are my two favorite frameworks for building the best websites. In this post I will tell you everything you need to know to use them together.

Code With Stein / Sep 22, 20 / 0 comments

In this video guide I'm demonstrating what conditional rendering in Vue.js works and how to use it. I'll explain the difference between "v-if" and "v-show" and when to use them.

Code With Stein / Sep 21, 20 / 0 comments

You often want to implement a CSS framework into your Vue.js apps. In this video I'm going to show you how to install Bulma using npm, import it into the app and then how to customize Bulma's variables.

Code With Stein / Sep 20, 20 / 0 comments

In this video I'm going to show you how to set up a Vue.js project using the new Vue CLI. Then I'm going to show you how to create a firebase project and implement it in the app.

Code With Stein / Sep 19, 20 / 0 comments

In the tenth part of the "Build a YouTube bookmarking site" course, we are going to go through how to make it possible to change the name of the categories.

Code With Stein / Sep 18, 20 / 0 comments

In this video I show you the basics of Vue.js Props. I'm showing how to pass strings and objects, how to add default values and how to set values as required.

Code With Stein / Sep 17, 20 / 0 comments

In the ninth part of the "Build a YouTube bookmarking site" course it's time to make it possible to delete movies. We'll add a delete button to the card and then we just call a simple function from Firebase to delete it.

Code With Stein / Sep 16, 20 / 0 comments

In the eight part of the "Build a YouTube bookmarking site" course, we'll make it possible to navigate between the different categories we have added. Bulma provides the styling for our tabs/categories, but we need to use Vue to toggle which of the tabs/categories are showing.

Code With Stein / Sep 15, 20 / 0 comments

In the seventh part of the "Build a YouTube bookmarking site" course, we are going to make it possible to add movies to our web app. We will be using a modal window from Bulma to show the add movie form.

Code With Stein / Sep 14, 20 / 0 comments

Building a social network isn't just a really cool project, but it's also a project that can teach you a lot of new cool things. In this video we will begin by installing the software we need, creating a new Django project and build a simple Twitter clone piece by piece. At the end of this video, you will have a working social network that we will deploy to a live server.

Code With Stein / Sep 13, 20 / 0 comments

In the sixth part of the "Build a YouTube bookmarking site" course, we are going to make it possible to add categories to our web app. We'll be using a modal window to show the category form. When a category is added, it's automatically added to the list of tabs/categories.

Code With Stein / Sep 12, 20 / 0 comments

In the fifth part of the "Build a YouTube bookmarking site" course, we are going to add the dashboard route and some information about the tabs. We'll also make it possible to log out of the web app and show the sign up / sign in buttons only when you're not authenticated.

Code With Stein / Sep 11, 20 / 0 comments

In the fourth part of the "Build a YouTube bookmarking site" course, we are going to go through how to install Bulma using Vue UI. We're going to set up some things like the navigation bar, and the authentication forms.

Code With Stein / Sep 09, 20 / 0 comments

In this part of the Build a YouTube bookmarking site with Vue.js course we are going to continue from the previous part where we set up Firebase.

Code With Stein / Sep 08, 20 / 0 comments

In the second part of the "Build a YouTube bookmarking site" course, we are going to go through how to install the Firebase dependency using Vue UI. We are going to create a project in the Firebase console, and last but not least, include Firebase in our Vue app.

Code With Stein / Sep 07, 20 / 0 comments

In this part of the "Build a YouTube bookmarking site" course, we are going to go through how to install the brand new Vue CLI 3, and how to set up a project. The project we're setting up is called VueTube, and here we can add YouTube movies sorted in to different categories we add.

Code With Stein / Sep 06, 20 / 0 comments

"Build a YouTube bookmarking site" is a course where we'll build a site using Vue.js and Firebase. On this site we'll add authentication so users can sign up and login. When a user is authenticated he or she can add categories, and add movies into them.

Code With Stein / Sep 05, 20 / 0 comments

In the last part of the getting started with Vue.js course I'm going to show you how to pass data from a child component to it's parent.

Code With Stein / Sep 04, 20 / 0 comments

In the seventh part of the getting started with Vue.js course we will go over how to implement forms in our Vue app. We are going to make it possible to change the title and the description.

Code With Stein / Sep 03, 20 / 0 comments

In the sixth part of the getting started with Vue.js course we will learn how to create components and how they can be reused. We will convert some of the existing code into a component.

Code With Stein / Sep 02, 20 / 0 comments

In the fifth part of the getting started with Vue.js course we will cover what computed properties are and how to use them in your projects.

Code With Stein / Sep 01, 20 / 0 comments

In the fourth part of the getting started with Vue.js course we will go through how we can render a list of objects. List rendering is very useful and you need it everyting you've got an array of data.

Code With Stein / Aug 31, 20 / 0 comments

In the third part of the getting started with Vue.js course we will learn how to bind data from the data object to attributes inside the template.

Code With Stein / Aug 30, 20 / 2 comments

In the second part of the course we will go through how you render parts of the template based on values in your data object.

Code With Stein / Aug 29, 20 / 0 comments

In part one of the course we will go through how you set up Vue and initializing a Vue instance.