martinussuherman / vue-template Goto Github PK

View Code? Open in Web Editor NEW

22.0 3.0 3.0 277 KB

Vue2 with typescript and vite starter template

Home Page: https://martinussuherman.github.io/vue-template/

License: MIT License

JavaScript 6.56% HTML 8.15% Vue 62.90% TypeScript 22.39%

vue vue2 vite vite-template vue2-typescript-vite vite-starter-template

vue-template's Introduction

Vue2 + Typescript + Vite Starter Template

Starter template example for Vue2 + Typescript + Vite.

Note: Using pnpm for package manager.

Project setup

pnpm install

Compiles and hot-reloads for development

pnpm run serve

Compiles and minifies for production

pnpm run build

Lints and fixes files

pnpm run lint

Customize configuration

See Configuration Reference.

vue-template's People

Contributors

Stargazers

Watchers

Forkers

remo gozeon jamesabell

vue-template's Issues

Fix 'Trailing spaces' issue in .github\workflows\gh-pages.yml

CodeFactor found an issue: Trailing spaces

It's currently on:
.github\workflows\gh-pages.yml:19

Cannot set a class property = @Prop value

Hey @martinussuherman,

Thanks for putting this together, I know this is just your template and has nothing to do with this repo, but wanted to get your take as maybe there's some kind of version issue here.

If you try to set a class property to a Vue property the class property will not be set. This is not the case when bundling with webpack (or other methods).

Example:

<template>
  <div>
    <p>This works: {{ test }}</p>
    <p>This also works: {{ thisWorks }}</p>
    <p>This doesnt: {{ thisDoesnt }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TestComponent extends Vue {
  @Prop({ default: "WORKS" }) input !: string;

  thisWorks = "WORKS!";
  thisDoesnt = this.input;
}
</script>

I've been spelunking in vue-property-decorator, but I can't see any reasoning for the change of behaviour. It seems likely that this may be a bug in esbuild, but would love to get your take.

Should note that defining the prop in the @component decorator works correctly, which is what made me focus on the the property decorator.

Someone also opened an issue with this in vite-plugin-vue2: underfin/vite-plugin-vue2#124 but I also don't think it's an issue with that.

Opening this issue here, so others see it if they are using this template.

Error with npm: [vite] Internal server error: Unexpected string

Hi,

Running 'npm install' and 'npm run dev' gives

[vite] Internal server error: Unexpected string
  Plugin: vite:css
  File: /home/marius/work/vue-template/src/App.vue?vue&type=style&index=0&lang.scss
      at wrapSafe (internal/modules/cjs/loader.js:979:16)
      at Module._compile (internal/modules/cjs/loader.js:1027:27)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
      at Module.load (internal/modules/cjs/loader.js:928:32)
      at Function.Module._load (internal/modules/cjs/loader.js:769:14)
      at Module.require (internal/modules/cjs/loader.js:952:19)
      at require (internal/modules/cjs/helpers.js:88:18)
      at importFresh (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:5931:47)
      at loadJs (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15294:18)
      at Explorer.loadFileContent (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15777:32)
      at Explorer.createCosmiconfigResult (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15782:36)
      at Explorer.loadSearchPlace (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15763:31)
      at async Explorer.searchDirectory (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15748:27)
      at async run (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15728:22)
      at async cacheWrapper (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15580:18)
      at async cacheWrapper (/home/marius/work/vue-template/node_modules/vite/dist/node/chunks/dep-6e02b235.js:15580:18)

I don't have pnpm in order to try it too. I understand that pnpm is faster, but the project should still work with npm, right?
I'm not sure this is a npm issue or a vue-template setup issue.