Repository typescript-template

stepbeekio

stepbeekio posted a new feature request

typescript-template • 7 days ago

idea Nuxt.js fetch functionality

What problem does this feature solve?

https://nuxtjs.org/api/pages-fetch/

I would like support for the above Nuxt.js function such that the following code works:

export default Vue.extend({
  ...

  async fetch({ store }) {
    await store.dispatch('someAction');
  }
  ...
})

Currently, this is met with a TS2345 error since the argument is not declared in the Vue.js Typescript definitions. I'm not sure if the onus is on Nuxt here, or whether the Vue.js typescript project should offer something more general?

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • a month ago

Should node_modules folder be excluded inside tsconfig.json?

Looking at the template I see that current tsconfig.json doesn't have a "files" or "excluded" properties specified, does this mean that all [ts] files from "nodemodules" folder are being compiled? If I try to exclude "node_modules" I start getting compilation errors when I run "nuxt" command

hukusuke1007

hukusuke1007 posted a new question

typescript-template • 2 months ago

About correct implementation method using router and props in TypeScript

I would like to set props paramater in TypeScript

this.$router.push( {name: 'nextPage', params: {id: 1, message: 'message'}} )

But it is occur error TS2345.

TS2345: Argument of type '{ name: string; params: { id: number; message: string; }; }' is not assignable to parameter of type 'RawLocation'.

Type '{ name: string; params: { id: number; message: string; }; }' is not assignable to type 'Location'.
Types of property 'params' are incompatible.
Type '{ id: number; message: string; }' is not assignable to type 'Dictionary<string> | undefined'.
Type '{ id: number; message: string; }' is not assignable to type 'Dictionary<string>'.
Property 'id' is incompatible with index signature.
Type 'number' is not assignable to type 'string'.

The implementation of the next page is as follows.

// nextPage
import {
  Component,
  Vue
} from "nuxt-property-decorator"
import { State } from "vuex-class"
import { print } from "util";
@Component({
  components: {
  },
  props: {
    id: {
      type: Number,
      default: -1
    },
    message: {
      type: String,
      default: 'default'
    }
  },
  watch: {
    message (oldVal, newVal) {
      console.log(oldVal, newVal)
    }
  }
})
export default class nextPage extends Vue {
  // @State people
  // function.
  created() {
    console.log('created before DOM')
  }
  mounted() {
    console.log('mounted after DOM')
  }
}

Please tell me how to implement correct props

naveensky

naveensky posted a new bug report

typescript-template • 3 months ago

bug Nuxt Edge - Issue when running/building the project

Version

latest

Reproduction link

[not required](not required)

Steps to reproduce

  • Create a normal typescript project by vue init nuxt-community/typescript-template my-project
  • Replace nuxt dependencies with nuxt-edge
  • Replace ts-loader with latest version of ts-loader (compatible with webpack 4.x)
  • Run command nuxt dev

What is expected ?

The app to start normally as per this https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67 which states no changes required for updating a nuxt 1.x project with nuxt 2.x project

What is actually happening?

Receiving an error

 INFO  Building project

✔ success Builder initialized
✔ success Nuxt files generated
✖ error TypeError: Cannot set property 'ts' of undefined
  at Builder.extendBuild.config (/Users/naveen/Downloads/nuxt/ts/modules/typescript.js:24:33)
  at Builder.<anonymous> (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:142:17)
  at WebpackClientConfig.config (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11310:56)
  at Builder.webpackBuild (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11881:56)
  at Builder.build (/usr/local/lib/node_modules/nuxt-edge/dist/nuxt.js:11592:16)
  at <anonymous>
RaZeR-RBI

RaZeR-RBI posted a new question

typescript-template • 4 months ago

Using Nuxt loading component

How can I use the built-in page progress bar from a .vue file component?
My component class extends Vue from nuxt-property-decorator, and seems like it's missing the $nuxt variable (at least for me). Am I missing something? If additional information is needed, I'll happily provide it.

Any help would be greatly appreciated. I've just started using Nuxt and it's great :)

sobolevn

sobolevn posted a new bug report

typescript-template • 4 months ago

bug vue-dev-tools do not work

Version

6af12b03f798c7a0a50c209a98a833ac57753402

Reproduction link

https://github.com/nuxt-community/typescript-template

Steps to reproduce

Before running make sure that vue-dev-tools is installed in your browser.

  1. Run npx vue-cli init nuxt-community/typescript-template my-ts-project
  2. Run npm install
  3. Run npm run dev and visit localhost:3000
  4. Open dev tools

What is expected ?

I expect that my state, my components, and my event will be shown.

What is actually happening?

Снимок экрана 2018-04-14 в 10.45.39.png
Снимок экрана 2018-04-14 в 10.45.43.png
Nothing is shown. All tabs are empty.
Снимок экрана 2018-04-14 в 10.45.49.png

Additional comments?

Other apps work fine.

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 5 months ago

[Critical] - Build is failing. Missing dependency nuxt-property-decorator

Steps to reproduce:
Clone repo using vue-cli
Install dependency with npm/yarn
Run npm run dev

ERROR Failed to compile with 2 errors12:32:38

This dependency was not found:

  • nuxt-property-decorator in ./nodemodules/ts-loader?{"appendTsSuffixTo":[{}]}!./nodemodules/vue-loader/lib/selector.js?type=script&index=0!./components/Card.vue, ./nodemodules/ts-loader?{"appendTsSuffixTo":[{}]}!./nodemodules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue

To install it, you can run: npm install --save nuxt-property-decorator

nuxt-property-decorator is present in node_modules folder, but it seems that it's broken. It references some unexistent entry point in package.json nuxt-property-decorator.umd
I have strong doubts on whether it should be used instead of nuxt-class-component + vue-property-decorator although it seems logical, the dependency itself is quite problematic

salvadornico

salvadornico posted a new question

typescript-template • 6 months ago

Cannot deploy to Netlify

Hi, I'm encountering an error when trying to deploy this template to Netlify.

This error appears in the deployment log, although it still completes and marks the deployment as succesful:
screenshot from 2018-03-02 11-34-41

After deployment, this is all that appears when following the genrated URL (https://hardcore-curie-c8f6ae.netlify.com)
screenshot from 2018-03-02 11-35-20

I'm not sure if there's something wrong with the template itself or my deployment.

Steps to recreate:

  1. $ vue init nuxt-community/typescript-template my-project OR clone my repo of the same: $ git clone https://github.com/salvadornico/nuxt-ts-test.git
  2. Add to Github as a new repository
  3. Create new site on Netlify, connecting this new repo
  4. For deployment settings: yarn generate as build command, dist as publish directory
  5. Deploy site

Thanks for the help!

wellnine

wellnine posted a new question

typescript-template • 6 months ago

How to integrate some test tool eg Ava/Karma/Tape etc.

Hi. Could you, please, provide some tutorial how to integrate any of these tools into this nuxt-project? I have spent a lot of time to try to configure but it doesn't work at all.

Many thanks for any help.

hannanmumtaz

hannanmumtaz posted a new question

typescript-template • 6 months ago

Saperate the script in vue files to .ts files.

Hi guys.

Is it pobbile to split .vue files under /pages and keep the script in .ts file and the template in .vue files.

am trying to split the html and the script part.

the /pages can have
/pages/index.vue
/pages/index.ts

index.vue - can have reference to script

<template>

Nuxt TypeScript Starter
Selected Person: {{selectedPerson.first_name}} {{selectedPerson.last_name}} is #{{selected}}
<Card :person="person"></Card>

</template>
<script src="./index.ts"></script>

is the above currently possible ?

pkej

pkej posted a new question

typescript-template • 6 months ago

Integrate with create nuxt app

To get one step to select between JS and TS. Create-nuxt-app

pkej

pkej posted a new question

typescript-template • 6 months ago

Integrate vuex-typex?

It seems to be doing a lot of boilerplate in addition to being ts. Vuex-typex

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 6 months ago

Change api to middleware

That's just a suggestion. Since we don't have any example of a middleware inside a template but we use an undocumented api folder which is just a discrepant addition in my opinion. Why not use middleware as Nuxt intended? api/people.ts can be placed in middleware folder and rewritten as such:

export default async function({store, error, redirect}){
    if(process.client) return;
    await store.dispatch('getPeople')
}

and in the store actions:

async getPeople({commit}){
            commit('setPeople', await axios.get('/random-data.json').data.slice(0,3));
    }

and in nuxt.config.js module.exports object

router: {
    middleware: 'people'
  },

this way we can showcase how middleware function can be used in the template that might be beneficial for a lot of users

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 6 months ago

Remove unneeded project dependencies

I don't see any reason for keeping these dependencies as root level:

"vue": "^2.5.13",
"vue-meta": "^1.4.2",
"vuex": "^3.0.1",
"vue-router": "^3.0.1",
"webpack": "^3.10.0"

all of those already have been installed by nuxt internally.

as I've highlighted in this issue #31 these dependencies won't be needed when we'll move to nuxt-property-decorator

"vue-property-decorator": "^6.0.0",
"vue-class-component": "^6.1.2",
"nuxt-class-component": "^1.2.0",

These dependencies are also under a question since they don't really relate to a TypeScript template idea and might be made optional to install during template initialization process for users who really like them to be in their template. ( I personally would also like to have SASS support as an option) #32

"gsap": "^1.20.3",
"tachyons": "^4.9.1",
"axios": "^0.17.1",

So, ideally, we should have only these dependencies installed by default:

"dependencies": {
    "nuxt": "^1.3.0",
    "nuxt-property-decorator": "^1.0.0",
    "vuex-class": "^0.3.0"
  },
AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 6 months ago

Unable to transition to process.client from context.isClient

Since the project was updated to Nuxt v. 1.3.0 I started getting a deprecation warning inside my middleware functions:
context.isClient has been deprecated, please use process.client instead.
the funny part is that I can't change my code to use process.client instead because of TS error:
TS2339: Property 'client' does not exist on type 'Process'.
so it seems like this change was made without TS in mind. How can this typing issue be fixed?

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 6 months ago

Replace axios with @nuxtjs/axios

Since we have a @nuxtjs/axios modification that is specifically crafted for use together with Nuxt it will be more logical to use it inside this template

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new question

typescript-template • 6 months ago

Replace vue-property-decorator with nuxt-property-decorator

It's more of a suggestion rather than an issue. Since nuxt-property-decorator exists as a separate module that extends the nuxt-class component, maybe it would be better to use it inside template instead of vue-property-decorator ?

ay13

ay13 posted a new question

typescript-template • 6 months ago

Example without class-style components

This example uses class-style components and property decorators. Is there an example without those?

From vue-cli 3 default not using the class-style components:

<template>
  <div class="home">
    <img src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default Vue.extend({
  name: 'home',
  components: {
    HelloWorld,
  },
});
</script>
qm3ster

qm3ster posted a new question

typescript-template • 7 months ago

NPM doesn't install dependencies correctly

yarn works immediately.
npm install doesn't install webpack, vue, vue-meta, vue-router, vuex
npm install && npm install nuxt also works perfectly.

qm3ster

qm3ster posted a new question

typescript-template • 7 months ago

Live demo down.

Please update demo, it is currently 404.