vue-sfc-static

A Static Template for Vue.js Single File Component (SFC) files with Vue3, Vue Router, Phosphor Icons, Axios, jQuery, and Tailwind CSS using the CDN. I made one with backend a while back but lost it 👎

Overview

This template is designed to provide a starting point for creating Vue.js applications with Single File Component (SFC) files (.vue files), leveraging the CDN for easy setup and deployment. It includes Vue3, Vue Router, Phosphor Icons, Axios, jQuery, and Tailwind CSS.

Features

• Vue.js Single File Component (SFC) support
• Vue3, Vue Router, Phosphor Icons, Axios, jQuery, and Tailwind CSS using the CDN
• Responsive design with Tailwind CSS

Getting Started

To get started with this template, follow these steps:

1. Clone the repository to your local machine:

git clone https://github.com/lendome/vue-sfc-cdn.git

2. Navigate to the project directory:

cd vue-sfc-static

3. Open the project in a code editor of your choice.

4. Open the index.html file in a web browser to see the application in action, you can use live server or any html server too I guess.

Usage

Creating a New SFC

To create a new SFC, simply create a new file in the src/components directory with the .vue extension. The file should follow the SFC syntax, with the <template>, <script>, and <style> sections.

Routing

Routing is set up in the index.html file already, to add pages as components just add the page name with the component directory :3

Importing Libraries

The template uses the CDN to import the following libraries:

• Vue3: https://cdn.jsdelivr.net/npm/vue@3
• Vue Router: https://cdn.jsdelivr.net/npm/vue-router@4
• Phosphor Icons: https://cdn.jsdelivr.net/npm/phosphor-icons/dist/phosphor-icons.svg
• Axios: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
• jQuery: https://code.jquery.com/jquery-3.6.0.min.js
• Tailwind CSS: https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.js

Customization

Feel free to customize the template to fit your needs. You can modify the CSS, JavaScript, and HTML to create a unique application that fits your brand and requirements. It frankly is just bare bones.

License

This template is released under the MIT License. Feel free to use, modify, and distribute it as you see fit.