Drag & Drop landing page builder made with Laravel 8, Vue.js 3 and Tailwind CSS

Related tags

Projects Using Vue.js vuejs laravel tailwindcss
Overview

EZ Landing Page Builder

The app

Simple web app to easily create landing pages by dragging and dropping prebuilt blocks.

Each block makes available a set of options to easily customize its content.

Users don't need to write a single line of code.

Video demo (click to go to YouTube)

YouTube Demo Video

The stack

Frontend

  1. Vue.js 3 + Vuex 4 + Vue Router 4
  2. Vite.js
  3. Tailwind CSS 3 + Daisy UI
  4. Sortable.js

Backend

  1. Laravel 8
  2. Laravel Sail
  3. Laravel Sanctum
  4. Laravel Fortify

Setting up the backend

  1. Clone the repo and navigate to the directory
git clone [email protected]:isaac-souza/pagebuilder-laravel.git
cd pagebuilder-laravel
  1. Copy the sample .env file
cp .env.example .env
  1. Install the dependencies (requires at least PHP 8.0)
composer install
  1. Start Laravel Sail (needs Docker installed in your system)
vendor/bin/sail up
  1. Generate key, run the migrations and link the storage folder
vendor/bin/sail artisan key:generate
vendor/bin/sail artisan migrate --seed
vendor/bin/sail artisan storage:link
  1. Run the tests
vendor/bin/sail artisan test
  1. The backend should be available at
http://localhost

Setting up the frontend

  1. Clone the repo and navigate to the directory
git clone [email protected]:isaac-souza/pagebuilder-vue3.git
cd pagebuilder-vue3
  1. Install the dependencies
npm install
  1. Copy the sample .env file
cp .env.example .env
  1. Start the dev server
npm run dev
  1. The frontend should be available at
http://localhost:3000

Testing

Now you should be able to go to http://localhost:3000, access the login page and sign in into the app

My development environment

OS:

No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.6 LTS
Release:	18.04
Codename:	bionic

Docker:

Docker version 20.10.12, build e91ed57

Docker-compose:

docker-compose version 1.29.2, build 5becea4c

PHP:

PHP 8.0.15 (cli) (built: Jan 29 2022 07:24:35) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.15, Copyright (c) Zend Technologies
    with Zend OPcache v8.0.15, Copyright (c), by Zend Technologies

Composer

Composer version 2.1.6 2021-08-19 17:11:08

Node

v14.19.0

NPM

6.14.16
You might also like...
CMS web page for the creation of small e-commerce developed with Laravel and Vue+Vuex

Delivery Service Descrizione il servizio deve permettere con facilita' la possibilita' per un utente di trovare i ristoranti/negozi/bar che fanno atti

null 0 Nov 28, 2021
Register page, Login page and Contact list with Vue.js and Firebase
Register page, Login page and Contact list with Vue.js and Firebase

Register, Login and Contact list This is a personal study project. Only for study and reference. View project About Contact Joao Paulo C. M. Fricks jp

João Paulo Fricks 0 Sep 29, 2022
Simple Task List app made with Laravel, Vue and Tailwindcss
Simple Task List app made with Laravel, Vue and Tailwindcss

Simple Task List Laravel + Vue + TailwindCSS Requirements Composer Node NPM Installation This project use Laravel 5.6 as Framework, to run it see the

Lucas Leandro 43 Oct 8, 2022
A single-page web-app made to browse and download your Netlify deploys. Built with Vue.js and Vite, deployed on Netlify.

A single-page web-app made to browse and download your Netlify deploys. Built with Vue.js and Vite, deployed on Netlify.

Hrishikesh Kokate 0 Aug 30, 2022
A Status Page built on Cloudflare Worker and Pages (Vue + Tailwind)

Statuside A Status Page built on Cloudflare Worker and Pages (Vue + Tailwind). Inspired by Cachet, Statusfy, and Atlassian Statuspage. ⚠️ This is stil

Saiks 2 Oct 28, 2022
Basic and Simple Live Cricket Score site Build using Vue.js and Tailwind CSS

Live Cricket Score Basic and Simple Live Cricket Score site Build using Vue.js and Tailwind CSS This is an Demo and Sample site - Just clone or downlo

Santhosh Veer 1 Aug 11, 2022
Create a pokedex web page containing pokemon listing, details and favorite pokemon page

pokedex-vue-assessment Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run

Saiful Afiq 0 Jan 6, 2022
Pinterest clone built with tailwind.css and vue.js

vue-tailwind-template Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run

Stephanie Dietz 20 Jan 7, 2023
Chess Web Game with Vue JS 3 and Tailwind CSS
Chess Web Game with Vue JS 3 and Tailwind CSS

Chessplay Chess Web Game with Vue JS 3 and WindiCSS Installation

Ahmad Saugi 16 Dec 14, 2022
Comments
  • CSRF token mismatch

    CSRF token mismatch

    @isaac-souza Thanks for sharing this! I've followed the setup instructions but seem to be having an issue with CSRF tokens. I noticed the same thing on the demo, not being able to login or register. Has something changed?

    I use valet so I updated VITE_BACKEND_URL and also just tried serving the backend with php artisan serve on a different port. So far the default, or my 2 alternatives have allowed me to login or register: image

    Any thoughts? Thanks!

    opened by LarryBarker 1
  • Image not show after upload

    Image not show after upload

    image everything is good but how to change the main URL images after upload the backend uses port 8000 but the image gets from localhost without port thanks

    opened by irfnrdh 1
  • A bug: vendor/bin/sail up

    A bug: vendor/bin/sail up

    executor failed running [/bin/sh -c apt-get update && apt-get install -y gnupg gosu curl ca-certificates zip unzip git supervisor sqlite3 libcap2-bin libpng-dev python2 && mkdir -p ~/.gnupg && chmod 600 ~/.gnupg && echo "disable-ipv6" >> ~/.gnupg/dirmngr.conf && apt-key adv --homedir ~/.gnupg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys E5267A6C && apt-key adv --homedir ~/.gnupg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C300EE8C && echo "deb http://ppa.launchpad.net/ondrej/php/ubuntu hirsute main" > /etc/apt/sources.list.d/ppa_ondrej_php.list && apt-get update && apt-get install -y php8.1-cli php8.1-dev php8.1-pgsql php8.1-sqlite3 php8.1-gd php8.1-curl php8.1-imap php8.1-mysql php8.1-mbstring php8.1-xml php8.1-zip php8.1-bcmath php8.1-soap php8.1-intl php8.1-readline php8.1-ldap php8.1-msgpack php8.1-igbinary php8.1-redis php8.1-swoole php8.1-memcached php8.1-pcov php8.1-xdebug && php -r "readfile('http://getcomposer.org/installer');" | php -- --install-dir=/usr/bin/ --filename=composer && curl -sL https://deb.nodesource.com/setup_$NODE_VERSION.x | bash - && apt-get install -y nodejs && npm install -g npm && curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && apt-get update && apt-get install -y yarn && apt-get install -y mysql-client && apt-get install -y postgresql-client && apt-get -y autoremove && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*]: exit code: 100 ERROR: Service 'laravel.test' failed to build : Build failed

    opened by thuccoi 1
Owner
Isaac Souza
Fullstack Laravel/Vue.js developer
Isaac Souza
GitHub https://pagebuilder.isaacsouza.dev/
Vue based visual drag-and-drop editing, page generation tools

Vue based visual drag-and-drop editing, page generation tools. To improve front-end development efficiency, it can be integrated into mobile terminal projects as a UI interface generated directly by defining JSON.

孤傲 213 Nov 29, 2022
A demo landing page for intime.digital with light house optimizations and built with Vue

intime.digital Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints

Nawazish Ali 0 Dec 27, 2021
A Twitter-like, 9GAG-like web app made in Laravel 9, Vue3, InertiaJS & Tailwind

Nothing special, just a birb-gag To learn, to enjoy coding. A Twitter-like, 9GAG-ish web app where users can post text, image & video posts in categor

@stux 9 Oct 12, 2022
Create easy workflows for web scraping using the web and drag and drop features.

Create easy workflows for web scraping using the web and drag and drop features. Making scraping e

Antonio 4 Dec 14, 2022
Vue-pwa-ecommerce - A PWA e-commerce page, using Vue.js, Nuxt.js, Tailwind CSS & Snipcart

Vue PWA Organic Fruit Shop Intro The main goal was to create a Progressive Web A

Marta B. 21 Dec 8, 2022
Chat app made with Vue 3 & Tailwind css.

Features ⚡ Dark and light themes Message attachments Replies and pins Voice calls Settings Archive conversations Notifications Setup ?? 1. Clone the r

Demon Archon 22 Dec 29, 2022
Gitfolio is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username

Gitfolio is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It i

Mehdi Rtal 5 Sep 30, 2022
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

Laravel Enso 1k Jan 3, 2023
Laravel-weather-app - Laravel Weather App Built With Vue.js

Laravel Weather App Installation Clone the repo locally: git clone https://githu

Prodromos Pantos 0 Jan 14, 2022
Vuelar (Vue-Laravel) - A Laravel-powered pagination package for Vuejs

vuelar (Vue-Laravel) is a vue package that takes care of pagination for a Laravel-powered backend on a Single-Page Application. This package assumes familiarity with Laravel and requires vue-router for navigation.

SirMekus 10 Jul 31, 2022