Forem: Matheus Cardoso

Adding SASS/Scss to your Vuejs project (and micro frameworks pains)

Matheus Cardoso — Tue, 07 Jul 2020 16:39:15 +0000

Se você não ler em Inglês, esse mesmo artigo está escrito em português brasileiro, aqui.

This will be quick. Here's my devDependencies:

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "vue-template-compiler": "^2.5.17"
  }

I'm telling you this because you may have using Vue CLI v4 or any other version that has this issue already solved. To use SASS/Scss in your template like this <style lang="scss"></style> your devDependencies will become

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "fibers": "^5.0.0",
    "node-sass": "^4.14.1",
    "sass": "^1.26.9",
    "sass-loader": "7.1.0",
    "style-loader": "^1.2.1",
    "vue-template-compiler": "^2.5.17"
  },

Pay attention to "sass-loader": "7.1.0",. This is the main key to make this works, because it seems that there's compatibility issues between Vue CLI 3 and sass-loader recent versions. Oh, and also you must add to your vue.config.js this:

configureWebpack: {
      module: {
        rules: [
          {
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                  implementation: require('sass'),
                  fiber: require('fibers'),
                  indentedSyntax: true // optional
                },
              },
            ],
          },
        ],
      },
    }

Credits to this guy that helped me a lot: https://stackoverflow.com/a/47898293/2631087

It should work, otherwise comment bellow. And also I think that there's should be a more elegant way to solve this - I just didn't find yet 😅.

Now, the following won't be that quick.

I'm an Angular guy. Real fan and developer since when it was AngularJS. And I know that even more nowadays Angular is pretty (damn) verbose, huge compared to Vuejs (React, Svelte) and can be real tricky some times due to Zonejs and other "magics". BUT...It works! It just works!

I have never bother myself in use or not CSS or SASS except to switch a simple option in CLI. And even more, I have never spent an hour just trying to find the solution for this kind of issue 🤯. Which led me to write this post.
I don't need axios, other example, because Angular already have HTTP built-in and so many other choices already made that I'm, in general, most comfortable with (Emberjs folks understand that feeling, I think).

This is not a letter against Vuejs or any other lib or "micro framework", but a letter to whom is switching worlds (like me) or who is starting now and have to choose among Angular, Vuejs, Emberjs, React or any other FW/lib.

Ps.: Despite of many things, I'm really enjoying Vuejs.

Adicionando SASS/Scss ao seu projeto Vuejs (e dores de micro-frameworks)

Matheus Cardoso — Tue, 07 Jul 2020 16:38:31 +0000

If you came here and don't read brazillian portuguese, take this reading in english here.

Isso será rápido. Aqui estão minhas devDependencies:

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "vue-template-compiler": "^2.5.17"
  }

Estou lhe dizendo isso porque você pode estar usando o Vue CLI v4 ou qualquer outra versão que já tenha esse problema resolvido. Para usar o SASS/Scss em seu como este <style lang ="scss"></style>, seu devDependencies se tornará:

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "fibers": "^5.0.0",
    "node-sass": "^4.14.1",
    "sass": "^1.26.9",
    "sass-loader": "7.1.0",
    "style-loader": "^1.2.1",
    "vue-template-compiler": "^2.5.17"
  },

Preste atenção ao "sass-loader ":" 7.1.0",. Esta é a chave principal para fazer isso funcionar, porque parece que há problemas de compatibilidade entre o Vue CLI 3 e as versões recentes do sass-loader. Ah, e você também deve adicionar ao seu vue.config.js o seguinte:

configureWebpack: {
      module: {
        rules: [
          {
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                  implementation: require('sass'),
                  fiber: require('fibers'),
                  indentedSyntax: true // optional
                },
              },
            ],
          },
        ],
      },
    }

Créditos a esse cara que me ajudou muito: https://stackoverflow.com/a/47898293/2631087

Deve funcionar, caso contrário, comente abaixo. E também acho que deve haver uma maneira mais elegante de resolver isso - eu só não encontrei ainda 😅.

Agora, o seguinte texto não será tão rápido.

Eu sou um cara angular. Fã e desenvolvedor desde quando era o AngularJS. E eu sei que hoje em dia, ainda mais, o Angular é bem verboso, enorme comparado ao Vuejs (React, Svelte) e pode ser bem complicado algumas vezes devido ao Zonejs e outras "mágicas". MAS ... Funciona! Ele simplesmente funciona!

Eu nunca precisei me incomodar em usar ou não CSS ou SASS, e se eu quisesse, bastava mudao uma opção simples na CLI. E ainda mais, nunca passei uma hora inteira tentando encontrar a solução para esse tipo de problema 🤯. Que foi que gerou esse post.
Eu não preciso do axios, outro exemplo, porque o Angular já tem HTTP embutido e tantas outras escolhas que eles já fizeram que eu, em geral, me sinto confortável (o pessoal do Emberjs entende esse sentimento, eu acho) .

Esta não é uma carta contra o Vuejs ou qualquer outra lib ou "micro framework", mas uma carta para quem está mudando de mundo (como eu) ou que está começando agora e precisa escolher entre Angular, Vuejs, Emberjs, React ou qualquer outro FW/lib.

Ps .: Apesar de muitas coisas, estou gostando muito do Vuejs.

Dica rápida: POST para JSON:API

Matheus Cardoso — Sun, 07 Jun 2020 16:22:07 +0000

If you arrived here and do not speak/read/write in native Portuguese/Brazilian Portuguese or do not prefer to read in this language, this same article is written in English here.

Esta é uma dica rápida para iniciantes em JSON: APIs. Se você acha que é apenas JSON, pense novamente. É JSON e "mais algumas" definições. Aqui estão algumas coisas que eu não sabia, subestimando as especificações, e quebrei minha cabeça.

Primeiro, o Content-Type não é application/json. O tipo correto é application/vnd.api+json. Caso contrário, o servidor responderá com 415 Unsupported Media Type.

Segundo, seu payload *para fazer um POST deve * conter data (conhecido como "dados primários") e ** deve ** ter pelo menos o seguinte formato:

{
  "data": {
    "type": "meu 'segredo' estava aqui",
    "attributes": <payload>
  }
}

Se você esquecer de colocar data, receberá o seguinte erro:

{
   "errors":[
      {
         "detail":"Received document does not contain primary data",
         "source":{
            "pointer":"/data"
         },
         "status":"400"
      }
   ]
}

Você só precisa adicionar data e colocar seu payload ematributos. Depois disso, se você esquecer o type ou defini-lo como None, porque estamos fazendo um POST, você receberá o seguinte erro (ou algo semelhante):

{
   "errors":[
      {
         "detail":"The resource object's type (None) is not the type that constitute the collection represented by the endpoint (<O_NOME_DO_ENDPOINT>).",
         "source":{
            "pointer":"/data"
         },
         "status":"409"
      }
   ]
}

E o erro acima foi o que tomou minha energia e me fez escrever esse post. Demorei um pouco para descobrir, apesar da mensagem, qual foi o erro, mas pode ser diferente em outra situação/framework/estrutura, eu acho. Eis aqui a minha situação, usando Django + DRF + JSON:API:

from rest_framework.decorators import api_view

@api_view(["POST"])
def my_api_post_endoint(request):
    ...

A partir do endpoint acima, usando @api_view (e estou sendo bastante específico, porque não testei com ViewSets ou outros endpoints baseados em classe), apenas tive que definir o type do payload como o mesmo nome do endpoint. Como abaixo:

{
   "data":{
      "type":"my_api_post_endoint",
      "attributes":"payload"
   }
}

E foi isso! O POST estava passando e eu pude seguir em frente com o meu trabalho.

Moral da história? Leia a p**** das especificações antes. 😅

Quick tip: posting to JSON:APIs

Matheus Cardoso — Sun, 07 Jun 2020 16:21:41 +0000

Se você chegou aqui e não fala/ler/escreve nativamente inglês ou não prefere ler neste idioma, esse mesmo artigo está escrito em português do Brasil aqui.

This is a quick tip to newcomers to JSON:APIs. If you think it's just JSON, think again. It's JSON and "some more" definitions. Here's some stuff that I didn't know, underestimating the specs, and cracked my head.

First, the Content-Type ain't application/json.. The correct type is application/vnd.api+json. Otherwise, the server will respond with 415 Unsupported Media Type.

Second, your payload to POST must contain data (called "primary data") and must have at least the following format:

{
  "data": {
    "type": "my final 'secret' was here",
    "attributes": <your_payload>
  }
}

If you miss data you'll get the following error:

{
   "errors":[
      {
         "detail":"Received document does not contain primary data",
         "source":{
            "pointer":"/data"
         },
         "status":"400"
      }
   ]
}

You just need to add data and put your payload into attributes. After that if you miss type or setting as None, because we're POSTING, you will get the following error (or something similar):

{
   "errors":[
      {
         "detail":"The resource object's type (None) is not the type that constitute the collection represented by the endpoint (<ENDPOINT_NAME>).",
         "source":{
            "pointer":"/data"
         },
         "status":"409"
      }
   ]
}

And the above error was the one that took my energy and made me write down this post. It took me a while to figure out, despite of message, what was the error, however it can be different in other situation/framework/structure, I think. Here was my situation, using Django + DRF + JSON:API:

from rest_framework.decorators import api_view

@api_view(["POST"])
def my_api_post_endoint(request):
    ...

Giving the above endpoint, using @api_view (and I'm being pretty specific cuz I didn't tested with ViewSets or other class based endpoints) I just had to set the whole payload's type as the same name of my endpoint. Like bellow:

{
   "data":{
      "type":"my_api_post_endoint",
      "attributes":"payload"
   }
}

And..Done! The POST was passing and I could move on with my work.

History's moral? Read the damn specs before. 😅