Develop isolated Vue components lightning fast ⚡ in Laravel.

Related tags

laravel vue vite vitejs
Overview

Introduction

Ever found yourself wanting to story your Vue components, but without the overhead from tools like Storybook?
Laravel Ease provides a simple, yet powerful way to quickly develop, view, and gauge your Vue components - safely isolated from your application.

Think Storybook - but hold the steroids!

Quick and easy to set up, with familiar Laravel driven configuration, now makes Vue component development a cinch.

Installation

composer require cgnetwork/ease --dev

After installing the package, you may execute the Artisan install command:

php artisan ease:install

The Artisan install command will:

  • Add ease scripts to your project package.json
  • Publish EaseComponent.vue to your project resources/js/components

Finally, to complete installation:

npm run ease:install

Usage

npm run ease

Running the ease script will start your ease server, which you can reach at the provided route /ease

Directory Structured Routing

After installing the package, your project resources/js/components directory will have the provided ease example:

resources/js/components
  └── EaseComponent.vue

resulting in a route configuration:

[
  {
    path: '/ease/easecomponent',
    component: '/resources/js/components/EaseComponent.vue'
  }
]

with easy component access from your sidebar:

example.index.vue

Configuration

ease exposes environment variables useful for customisation:

EASE_NAME=Ease
EASE_SERVER_URL=http://localhost:3000

Pre-configured and ready to go out of the box, you can fully customize ease to your liking by publishing ease.php to your config directory:

php artisan ease:publish

Contributing

Thank you for considering contributing to Laravel Ease! We welcome all pull requests.

License

Laravel Ease is open-sourced software licensed under the MIT license.

Issues
  • Live reload not working as expected

    Live reload not working as expected

    When updating a Vue component, changes are not live reloaded.

    bug released 
    opened by trueChazza 2
  • Permission denied running script

    Permission denied running script

    After installing package, running yarn ease script returns permission denied.

    The script points to the .bin command vite, inside the vite node_modules directory.

    bug 
    opened by trueChazza 1
  • Reloading breaks page

    Reloading breaks page

    On page reload, 404 is returned.

    bug released 
    opened by trueChazza 1
  • How to run ease commands with npm?

    How to run ease commands with npm?

    opened by besrabasant 1
  • Add mobile responsive layout

    Add mobile responsive layout

    Add mobile responsive layout.

    Partially implemented, needs mobile sidebar interaction.

    enhancement good first issue released 
    opened by trueChazza 1
  • Allow ease route environment configuration

    Allow ease route environment configuration

    Allow ease route environment configuration to limit access

    enhancement good first issue 
    opened by trueChazza 1
  • Add info about server startup in readme

    Add info about server startup in readme

    documentation released 
    opened by trueChazza 1
  • Isolate package css

    Isolate package css

    Package css can potentially conflict with project css / components.

    Isolate package css to prevent conflicts.

    bug good first issue released 
    opened by trueChazza 1
  • Allow custom stylesheets

    Allow custom stylesheets

    This will reduce having stylesheets inline in the component.

    enhancement good first issue released 
    opened by trueChazza 1
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here is some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    No npm token specified.

    An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

    Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by github-actions[bot] 0
  • Customise component directory

    Customise component directory

    Allow customisation of component directory, from the default.

    enhancement good first issue 
    opened by trueChazza 0
  • Pick up component directory changes

    Pick up component directory changes

    Example scenario:

    Once ease server started, adding / creating a new component in the project component directory, requires a server restart for the changes to be picked up.

    Ideal: Changes should be auto picked up.

    enhancement 
    opened by trueChazza 0
Releases(v0.9.0)
Vite - Vue 2 starter template using composition-api and windiCSS

Vite ⚡ - Vue 2 starter template Create a Vue 2 application bundled by the lightning fast build tool Vite ✨ Live Demo ?? Features ⚡️ Vite 2, Vue 2 and

null 78 Jun 11, 2021
Electron app boilerplate based on Vite 2.0

Vite Electron Builder Template Vite+Electron = ?? This is a secure template for electron applications. Written following the latest safety requirement

Alex Kozack 271 Jun 13, 2021
⚡️Starter template with Vite2 Vue3 and Electron 11.x /使用 Vite2 Vue3 以及 Electron 11.x 打造的快速启动模版。

vite-electron-quick ?? A fast Simple Vite2 Vue3 and Electron 11.x template. ⚡️ If you want to fast create a Vite 2 + Vue 3 + Electron 11.x project: ??

qicoo 100 Jun 13, 2021
A starter template for using vue-next with the latest electron.

Overview This repository contains the starter template for using vue-next with the latest electron. I started to learn electron & vue by the great pro

CI010 94 Jun 10, 2021
🏕 Opinionated Vite Starter Template

Mocking up web app with Vitesse(speed) Now with Windi CSS! ⚡️ Live Demo Features ⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness ?? File based ro

Anthony Fu 1.4k Jun 13, 2021
⚡ Vite Experience with Nuxt 2 🧪

?? Vite mode is experimental and many nuxt modules are still incompatible. If you find a bug, please report via issues with a minimal reproduction.

Nuxt 1.1k Jun 12, 2021
My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.

chengpeiquan.com My personal website. Base on Vite 2.0 and Vue 3.0. You can see Rewrite in vite to learn more. Architecture License MIT License © 2021

chengpeiquan 13 Jun 1, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

VUE VBEN ADMIN2.0 Chinese | English CHANGELOG Introduction GitHub Thin Preview Documentation Preinstallation Environmental requirements UI framework I

Vben 4.5k Jun 14, 2021
Vite 2.x + Vue 3.x + Tailwind 2.x (starter) ⚡

Vite 2.x + Vue 3.x + Tailwind 2.x starter ⚡ This starter template also includes: Vue Router 4.x Inter var font (self-hosted, woff2 format, version 3.1

Eugene Kopich 352 Jun 13, 2021
Resume generation template - Power by Vue3 + Vite + tailwindcss

简历生成模板 Vue3 + Vite + tailwindcss 功能 Web 端显示简历 打印成 PDF 通过 JSON 配置简历内容 使用方法 点击页面右上角的修改数据按钮,会弹出用于修改数据的文本框。 根据以下示例数据修改后点击弹出框的保存。

null 4 May 20, 2021
Vue 3 boilerplate starter based on Vite and Tailwindcss 2

vite-wind WIP ?? ?? ?? It's a Vue 3 boilerplate based on Tailwindcss + Typescript + Vite + css-pro-layout, You could clone this repository and use the

Brahim 34 Jun 12, 2021
Cypres component testing with Vue 3 and Vite

Cypress Vue 3 Vite Vite template with Vue 3 and Cypress component testing. Clone the repository and run yarn install to install the dependencies. yarn

Lachlan Miller 5 May 1, 2021
ZingMp3.vn clone with Vue 3 (Vite)

Zing Mp3 Clone (Vue 3) Vue 3, Vite, TypeScript, SCSS Installation: git clone https://github.com/uchindev/zingmp3-fe-ts.git cd zingmp3-fe-ts npm instal

Thinh Nguyen 28 May 28, 2021
Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter.

Vite Typescript + Tailwind Starter Simple, opinionated, and production-ready TS + Tailwind project template for Vite 2. See changelog for latest chang

Ville Säävuori 65 Jun 11, 2021