Server Side Vue

Say goodbye to SPAs for the best optimization and best security

How to Use

Server Side Vue

$ node-rails settings vue

Old School Templating Built in Vue

Individual Assets

Each page is its own Vue application, the shared state that is normally global across the client is stored on the server. All Vue components are the same. You can find the Vue page component file in the same directory as your Vue mount file.

Building your Vue component is the same except the props for your page can be passed down from the server. This gives you the page source from your html in your vue and allows you to restrict routes and views based on the data stored on the server.

Writing Vue Component

Global Components

Writing your Vue components are the same. For global reusable components they must be required for a directory outside of your pages directory. All assets just like your pub templates for styling pages are the same.

File Structure Example

/assets /vue /components /REUSABLE_COMPONENT.vue /pages /component.vue

No Vue Router

There is no Vue Router because the server controls all the routing for the best security. Client side code no longer controls your server routes. This protects you against many different client side exposes and your server is in control of your server's security.

Client Side route pushing example

window.location.href = '/blogs';
Vue router uses the window.location and window.history objects to push the client to other routes. Use the window object to control your client.

View Route Security

Add middleware to your view routes for the security on your server.