Sails.js & Vue.js - Part 2

The traditional refit was a success, but it revealed the friction of the old ways. Now, we unleash the full power of the modern armada. We will cast the magical enchantment that fuses our Sails backend and Vue front-end into a single, seamless entity.

Part 2: The Magical Enchantment (Introducing Inertia.js)

• Current Rank: Lord High Admiral
• Objective: To understand what Inertia.js is, how it works, and to use the modern create-sails tool to scaffold a new Sails + Vue + Inertia project, creating the perfect foundation for our SPA.

Chief Architect’s Briefing (Background and Theory)

In our last mission, we had our Vue crew “shouting across the deck” to the Sails crew via API calls. It worked, but it was noisy and required building two separate communication systems.

Inertia.js is the magical, telepathic link between the two crews.

It’s not a framework; it’s a new approach to building classic server-driven web apps. It allows us to create fully client-side rendered, single-page apps without the complexity of building and consuming a separate API. As the team behind Inertia says, it’s “The Modern Monolith.”

Here’s how the magic works:

1. A Link is Clicked: A user clicks a special <Link> component in your Vue front-end (e.g., <Link href="/logbook">).
2. Inertia Intercepts: Instead of a full page reload, Inertia intercepts this click and makes a background request (an XHR/fetch request) to the Sails server.
3. Sails Responds: Your Sails config/routes.js and controller work exactly as they did before. The controller fetches data from the database.
4. The New Response: This is the key. Instead of calling res.view('logbook', { data }) or res.json({ data }), your controller calls a new response: res.inertia('LogbookPage', { data }).
5. The Magic Payload: Sails sends back a special JSON response that contains two things: the name of the Vue component to render (LogbookPage) and the data as “props.”
6. Vue Takes Over: Back in the browser, Inertia receives this payload, automatically finds the LogbookPage.vue component, and seamlessly swaps it into the view, passing the data directly to it as props.

The result? You write your back-end logic in Sails controllers as you always have, and your front-end logic in self-contained Vue components. Inertia handles the “glue” in between. The official inertia-sails adapter is designed precisely for this, letting you “have the power of Sails and the client-side framework of your choice in one codebase” blog.sailscasts.com.

Setting this up manually is complex. Thankfully, the Sails community has provided a powerful shipwright’s tool to do it for us.

Key Concepts Checklist

• Inertia.js: The “glue” that connects a classic server-side framework (Sails) with a modern client-side framework (Vue).
• Modern Monolith: The architectural style of a single codebase that provides the feel of an SPA.
• Adapter: Server-side code (like inertia-sails) that teaches Sails how to speak the “Inertia language.”
• res.inertia(): The new response method used in controllers to render a client-side component.
• Props: The mechanism for passing data from a Sails controller directly to a Vue component.
• <Link>: The Inertia component that replaces traditional <a> tags for SPA navigation.
• create-sails: A scaffolding tool that generates a new Sails project pre-configured with Inertia and your choice of front-end framework docs.sailscasts.com.

Mission Log: Quest - “The Enchanted Shipyard”

We will not refit our old ship. We will build a new one from the ground up using the most modern tools available, creating the perfect foundation.

• Task 1: Commission the New Shipwright (create-sails)

  1. This tool will build our project’s skeleton for us. In your terminal (outside of any existing project), run the following command:

     npx create-sails@latest
     

• Task 2: Issue the Building Orders

  1. The command will launch an interactive setup wizard. Answer the prompts as follows to build an Inertia-powered Vue ship:
     • What is the name of your app?: inertia-flagship
     • Choose a template: Web App
     • Which front-end framework would you like to use?: Vue
  2. The tool will now download all the necessary dependencies and configure the project. This may take a minute or two. Once finished, navigate into your new vessel: cd inertia-flagship.

• Task 3: Inspect the Enchanted Blueprints

  1. Open the inertia-flagship project in your code editor. You’ll notice some new and important files that create-sails built for us:
     • vite.config.js: This configures Vite, a blazing-fast, modern build tool that now manages our front-end assets instead of the old Grunt-based system.
     • assets/js/app.js: The main entry point for our Vue/Inertia application on the client-side.
     • assets/js/pages/: This is where your Vue components will live. You’ll see a Homepage.vue already created.
     • api/responses/inertia.js: The server-side code that provides the res.inertia() response.
     • views/layouts/app.ejs: A very minimal layout file. Its only job is to provide a single <div id="app"> for Inertia to hook into.

• Task 4: The Maiden Voyage

  1. create-sails already ran npm install for you. All we need to do is lift the sails.

     sails lift
     

  2. Open your browser to http://localhost:1337. You will see a stylish welcome page. This entire page, unlike our previous projects, is a Vue component (Homepage.vue) rendered by Inertia!

Mission Debrief (Review & Outcomes)

Magnificent! You have just constructed a state-of-the-art vessel’s foundation in a fraction of the time it would have taken manually. You didn’t just build a ship; you built an enchanted shipyard, a development environment where the back-end and front-end are perfectly integrated from day one.

You now have a project where:

• Vite provides lightning-fast development builds.
• Sails handles routing and data logic.
• Vue handles the view layer.
• Inertia seamlessly bridges the two.

We haven’t built any custom features yet, but we have established the most powerful foundation possible. In our next mission, we will use this enchanted vessel to begin replacing static pages with fully interactive, data-driven Vue components.

Rewards

• +500 Doubloons
• Achievement Unlocked: You have mastered the modern scaffolding process and understand the core theory of Inertia.js.
  • Badge Earned: The Shipwright Enchanter ✨