VUE / TypeScript SingleFileComponent Starter Template

Overview

HelloWorld - SingleFileComponent TS Starter Template

Live | Home GitHub

Setup

install:

    # NPM
    npm install @mmit/vuetssfcstarter --save

    # YARN
    yarn add @mmit/vuetssfcstarter

Import: (in your main.js)

    import HelloWorldElements from '@mmit/vuetssfcstarter'
    Vue.use(HelloWorldElements)

Usage

Use: (in your local .vue file/component, html section)

    <hello-world>hello-world>
You might also like...
Starter Vue 3 + Typescript + Vite + Tailwindcss

Starter Vue 3 + Typescript + Vite + Tailwindcss This template should help get you started developing with Vue 3, Typescript and Tailwindcss in Vite. T

Vue 3 starter template: Vite / Vue 3 / Tailwind CSS / PNPM
Vue 3 starter template: Vite / Vue 3 / Tailwind CSS / PNPM

Vue.js starter template Features: 🛠 Vue 3 ⚡️ Vite 🗂 PNPM 🛣 Vue Router 🎨 Tailwind CSS 🔍 Eslint with airbnb and stylelint 🌗 Light and dark mode co

Vite - Vue 2 starter template using composition-api and windiCSS

Vite ⚡ - Vue 2 starter template This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool calle

Dashboard starter template built with Vue 3 and Tailwind CSS.
Dashboard starter template built with Vue 3 and Tailwind CSS.

Dashboard starter template built with Vue 3 and Tailwind CSS.

 Awrora Starter - Vue JS Landing Page Template
Awrora Starter - Vue JS Landing Page Template

Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.

If you are really into the A simple starter template for Vue JS + Tailwind
A simple starter template for Vue JS + Tailwind

Vue Tailwind A simple starter template for Vue JS + Tailwind About This is my project on creating a simple starter template for Vue JS and Tailwind. U

Vite + Vue Starter Template

Vite-lite 特性 ⚡️ Vue 3, Vite 3, pnpm, ESBuild - 就是快! 🍍 使用 Pinia 的状态管理 🍭 使用Element-Plus UI 组件库 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎 😃 各种图标集为你所用 🔥 使用 新

🏕 Opinionated Vite Starter Template
🏕 Opinionated Vite Starter Template

🏕 Opinionated Vite Starter Template

Comments
  • This solution seems to be not treeshakeable

    This solution seems to be not treeshakeable

    Hello 👋 Thanks for sharing, BUT this looks like all components are loaded to project at once, even components which are not used in project are loaded into project and into initial bundle. I haven't tried it yet, just initial feeling from:

    import HelloWorldElements from '@mmit/vuetssfcstarter'
        Vue.use(HelloWorldElements)
    

    Am I wrong?

    Thanks

    opened by luckylooke 2
  • When I pass props and change them in the parent components I get  $attrs is readonly and Prop being mutated:

    When I pass props and change them in the parent components I get $attrs is readonly and Prop being mutated:

    Expected Behavior

    Being able to pass props to the components.

    Actual Behavior

    When I pass prop to a component that I developed and exported from the library and then change the prop i get:

    [Vue warn]: $attrs is readonly.
    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "layout"
    

    image

    Steps to Reproduce the Problem

    1. add prop to HelloWorld.vue
        @Prop({ default: "" })
        private layout!: string;
    
    1. show the prop in the template
    2. change the prop from the parent component

    Specifications

    • Package version:
    • VueJS Version: 2.6.11
    opened by yanko-belov 1
  • rollup supports now vue

    rollup supports now vue "@" alias - e.g. '@/components/HelloWorld.vue'

    Developers often use @ as alias of src folder in Vue. Rollup template supports with this fix the default import syntax of Vue - e.g @/components/HelloWorld.vue. Developers do not need anymore to change @/components/HelloWorld.vue to ./components/HelloWorld.vue everywhere to make rollup template work for their Vue project.

    opened by dsvanidze 0
  • Problem to resolve @/*.vue files

    Problem to resolve @/*.vue files

    Hi,

    Thank you very much for your starter template. It is really helpful.

    I have a problem if I have many components which depend on other vue components. It does not work if dependent components are imported with `@/..../.vue pattern, but if I import them with normal javascript pattern like "./...../.vue, it works. Warning:

    (!) Unresolved dependencies
    https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
    @/components/Child.vue (imported by src/components/Parent.vue?rollup-plugin-vue=script.ts)
    

    I do not want to change all @/.../*.vue imports to ./..../*.vue. It is interesting that it does not work only for *.vue files, but for *.ts files work.

    Do you know how to solve the problem?

    Thanks in adnvace Davit

    opened by dsvanidze 1
Owner
Mike Mitterer
Mike Mitterer
Elucidator blog starter - a starter blog built with Vuejs 3, Vite, and Typescript

Elucidator blog starter Blog starter build with Vue 3 + Vite + Typescript

Elucidator Project 30 Nov 8, 2022
Nuxt3-awesome-starter - A Nuxt 3 starter template or boilerplate with a lot of useful features. Nuxt3 + Tailwindcss 3

Nuxt 3 Awesome Starter a Nuxt 3 starter template or boilerplate with a lot of us

Alfian Dwi Nugraha 663 Jan 2, 2023
:star: A Vite 2.x + Vue 3.x + TypeScript template starter

Vite2.x + Vue3.x + TypeScript Starter 在线预览 https://vite-vue3-starter.xpoet.cn

指间的诗意 415 Dec 28, 2022
🐬 A Starter template built on Vite 2.x + Vue 3.x + Typescript

vite-ts-starter ?? A Starter template built on Vite 2.x + Vue 3.x + Typescript. Live demo: Vite TS Starter Environment Support Vue 3.x Node >= 14.18.x

Wisdom 20 Dec 14, 2022
Vue template for starter using Vue3 + TypeScript + Vite + Pinia 🚀

Vue TypeScript Starter This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup>

Yuga Sun 30 Dec 24, 2022
⚡️Vite Vue, Pinia, vite-ssg, Typescript, eslint,stylelint starter template

A development template for vue3 + vue-router + pinia + typescript + vite-ssg

猴貓 1 Nov 26, 2022
A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS

VueJS 3 Starter ✨ A VueJS 3 starter to create Vue applications easily and quickly with Vue Router, Snowpack, TypeScript and SCSS Architecture ├─ publi

null 1 Jun 1, 2022
Vite Vue 3 starter with Vuex + Vue Router + Typescript + ESLint + Prettier

vite-vue3-essential-typescript-eslint-starter This template should help get you started developing with Vue 3 and Typescript in Vite. The template use

유안씌 12 Aug 12, 2022
Opinionated Vue 3 + Vite + Typescript blog starter ⚔

Elucidator blog starter Blog starter build with Vue 3 + Vite + Typescript Introduction Elucidator blog starter is a starter blog built with Vuejs 3, V

I Gusti Ngurah Satya Wikananda 30 Nov 8, 2022
This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS!

Nuxt 3 Starter Kit This is a Nuxt 3 Starter Kit with Vite, Vue 3, TypeScript, SCSS and TailwindCSS! We recommend to look at the documentation. Setup M

Ricardo 17 Nov 19, 2022