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 👎
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.
- 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
To get started with this template, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/lendome/vue-sfc-cdn.git
- Navigate to the project directory:
cd vue-sfc-static
-
Open the project in a code editor of your choice.
-
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.
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 is set up in the index.html file already, to add pages as components just add the page name with the component directory :3
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/[email protected]/dist/tailwind.min.js
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.
This template is released under the MIT License. Feel free to use, modify, and distribute it as you see fit.