parasails

0.9.3 verified Fri May 01 auth: no javascript

parasails is a lightweight (2.96KB gzipped) Vue.js-based framework for building multi-page applications without Webpack, Babel, or other build tools. Version 0.9.3 is the latest stable release. It provides structures for pages, components, utilities, and constants, with optional integrations for Vue Router and jQuery. Designed primarily for use with Sails.js, it offers a simpler alternative to full SPA frameworks by enabling server-rendered pages with client-side interactivity.

Common errors

error Cannot read property 'registerPage' of undefined ↓

cause parasails is not loaded or the import is incorrect.

fix

Check that parasails is correctly imported via script tag or ES module, and that it is available as a default export.

error Vue is not defined ↓

cause Vue.js is not loaded before parasails.

fix

Load Vue.js via a script tag before parasails, or import it in your bundler.

error Error: [parasails] Could not find a <div> with id "..." ↓

cause The HTML page does not contain an element with the id matching the registered page name.

fix

Add an element with the correct id, e.g., <div id="pageName">.

Warnings

gotcha parasails requires Vue.js to be available globally (window.Vue) or imported as a module. Ensure Vue is loaded before parasails. ↓

fix Include Vue via a script tag before parasails, or import it in your module bundler setup.

gotcha The jQuery integration for $get, $find, $focus methods requires jQuery to be loaded. Without jQuery, these methods will not work. ↓

fix Include jQuery via a script tag or import it if you need those methods.

gotcha parasails pages rely on having an element with an id matching the page name. The page will not mount if the element is missing or the id does not match. ↓

fix Ensure your HTML contains <div id="pageName"> where pageName matches the string passed to registerPage.

Install

npm install parasails

yarn add parasails

pnpm add parasails

Imports

parasails
wrong
```
const parasails = require('parasails')
```
correct
```
import parasails from 'parasails'
```
For browser usage, include as a script tag; parasails is not ESM-only, but the recommended way is via ES modules if bundling.
registerPage
wrong
```
parasails.registerPage('pageName', { ... })
```
correct
```
parasails.registerPage('pageName', { ... })
```
registerPage is a method on the default export, not a named import.

registerComponent

wrong

import { registerComponent } from 'parasails'

correct

parasails.registerComponent('componentName', { ... })

Same as registerPage; it's a method on the default export.

Quickstart

Shows a basic parasails page with Vue-like data and methods, no build tools required.

<div id="my-page" v-cloak>
  <h1>{{ message }}</h1>
  <button @click="updateMessage">Click me</button>
</div>
<script type="module">
  import parasails from 'parasails';
  parasails.registerPage('my-page', {
    data: {
      message: 'Hello parasails!'
    },
    methods: {
      updateMessage: function() {
        this.message = 'You clicked the button!';
      }
    }
  });
</script>