how to build a complete, real-world application from scratch with Ruby on Rails step by step.
A lot of Ruby code is "magic". We'll explain the magic and see how it works using the powerful tools Ruby gives us.
Accept subscription and one-time payments with Stripe in your Rails apps
Expert advice on keeping Rails apps organized and fast.
Cheap, easy hosting for Ruby and Rails apps.
Launch your product business way faster with our SaaS template.
A weekly podcast on web development and building products with Ruby, Rails, Javascript, and more.
Find your next Ruby on Rails Job.
We can use webpacker to create scoped styles for our Javascript widget and build an embed code that links to the latest version of our webpacker JS and CSS for our embeddable widget.
We don't want anyone to be able to embed your Javascript widget on any domain, so we'll setup our app to check the domain and only allow the widget on specific sites
Cross-origin Resource Sharing (CORS) allows your website to talk to other websites.
Embeddable Javascript Widgets often contain forms. We're using Vuex to build our comment form widget and we're going to use vue-map-fields to make this easier.
The next step in our embeddable javascript widget series is setting up our Vue frontend to talk with our Rails backend using Vuex
Starting our Embeddable JS Widget series outlining the comment and discussion models and the basic webpacker setup
Learn how to use Vue.js slots to make even more reusable components. In this episode, we build a dropdown menu for Tailwind CSS apps using Vue.js slots.
Learn how to deeply integrate your Vue.js components with Ruby on Rails views
Adding Vuex as our Data Store gives us the ability to add realtime updates to our trello clone across browsers using ActionCable
In this episode, we add card component, editing of cards, and the ability to create new lists
Refactoring our trello clone into sub-components and introducing a global datastore to really clean up our code
Improve the design of our Vue.js & Rails clone of Trello by making lists more visually distinct and setting up horizontal scrolling
This episode we handle drag and drop of cards in their own column and also between columns in our boards
Implement the Vue.Draggable plugin to add drag and drop support to our Vue.js application and sync the changes to the server
Adding new cards to our Vue app, persisting them in Rails, and re-rendering our UI
Set up Rails models, scaffolds, and webpacker with Vue.js to start rendering our views
Learn how to use VueJS as an alternative to Cocoon and other methods of building dynamic nested forms with Rails
Using Vue.js and Turbolinks together can be a little complex to wrap your head around at first. We not only dive into how this works but we take a look at the vue-turbolinks node module I made so that you can easily use the two together.
Let's take a look at using the Webpacker gem in Rails to implement an additional pipeline for building modern frontend Javascript alongside our Rails application using VueJS.
Join 70,078+ developers who get early access to new tutorials, screencasts, articles, and more.
We care about the protection of your data. Read our Privacy Policy.
Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8
© 2023 GoRails, LLC. All rights reserved.
